Canvas 裁剪与缩放

裁剪与缩放

    //CropWidth  CropHeight为设置的宽高 ，可自行设置
    const canvas = document.createElement("canvas");
    canvas.width = CropWidth;
    canvas.height = CropHeight;
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(
      image,  //原图片
      croppedAreaPixels.x,  //需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 X 轴坐标。
      croppedAreaPixels.y,  // 需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 Y 轴坐标。
      croppedAreaPixels.width,  //需要绘制到目标上下文中的，image的矩形（裁剪）选择框的宽度。
      croppedAreaPixels.height, //需要绘制到目标上下文中的，image的矩形（裁剪）选择框的高度。
      0, //image的左上角在目标canvas上 X 轴坐标。
      0, //image的左上角在目标canvas上 Y 轴坐标。
      CropWidth,  //image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放。 
      CropHeight  //image在目标canvas上绘制的高度。 允许对绘制的image进行缩放。 
    );
    

HTMLCanvasElement.toBlob() 方法创造Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。

第三个参数用于针对image/jpeg格式的图片进行输出图片的质量设置。

canvas.toBlob(callback, type, encoderOptions);

• callback
  回调函数，可获得一个单独的Blob对象参数。
• type 可选
  DOMString类型，指定图片格式，默认格式为image/png。
• encoderOptions 可选
  Number类型，值在0与1之间，当请求图片格式为image/jpeg或者image/webp时用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内，则使用默认值，其余参数将被忽略。

canvas.toBlob((blob)=>{
        // 得到裁剪或缩放后的图片blob 
    },"image/jpeg")

跨域问题

• 对于专门放置静态资源的服务器，可以通过在header中配置Access-Control-Allow-Origin，来进行跨域访问图片。

  header("Access-Control-Allow-Origin: *");
  //
  header("Access-Control-Allow-Origin: www.baidu.com");
  
  

• HTML crossOrigin属性解决资源跨域问题

关键字	说明
anonymous	元素的跨域资源请求不需要凭证标志设置。 只要crossOrigin的属性值不是use-credentials，全部都会解析为anonymous，包括空字符串，包括类似'abc'这样的字符
use-credentials	元素的跨域资源请求需要凭证标志设置，意味着该请求需要提供凭证。

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
    
var img = new Image();
    
// 添加后就可以避免跨域的报错
// img.crossOrigin = 'anonymous';
img.crossOrigin = '';
img.onload = function () {
    context.drawImage(this, 0, 0);
    //这样会导致报错
    context.getImageData(0, 0, this.width, this.height);
};
img.src = 'https://avatars3.githubusercontent.com/u/496048?s=120&v=4';';

• ajax和URL.createObjectURL()

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    var url = URL.createObjectURL(this.response);
    var img = new Image();
    img.onload = function () {
        // 此时你就可以使用canvas对img为所欲为了
        // ... code ...
        // 图片用完后记得释放内存
        URL.revokeObjectURL(url);
    };
    img.src = url;
};
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.send();

优化

对于图片裁剪缩放这类可能比较消耗资源的处理，可以利用WebWork启用另一个线程来进行处理，并且不会影响当前流程业务处理。

main.js

const option={
    ....// 图片裁剪的需要的参数
} 
//

const work = new Worker("work.js");      
//发送裁剪请求
work.postMessage(option);
// 监听消息
work.onmessage = function(blob) {
    console.log("图片",blob);
};

work.js

onmessage = function (option) {

//接收参数，进行图片裁剪
//最后返回blob
postMessage(blob);
}

参考

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API