Canvas 应用 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

实现图像大小调整


  图像大小调整通过先在Canvas上绘制一个对应大小的图像,接着通过CanvastoDataURL方法转化为base64编码的字符串形式的图片数据。

最后把该data:URL通过设置为img的src属性,到目标图像元素上。

resizeImage = function(width, height){  
    resize_canvas.width = width;  
    resize_canvas.height = height;  
    resize_canvas.getContext('2d').drawImage(orig_src, 0, 0, width, height);     
    $('.resize-image').attr('src', resize_canvas.toDataURL("image/png"));    
};