最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

观速讯丨canvas处理切图并旋转图片

来源：博客园


(相关资料图)

场景描述

需要把大图中的框的图片给显示出来~类似下图

如果将图片倒置，则显示对应倒置的图片~类似下图

代码实现

let base64Canvas = document.createElement("canvas");let base64Context = this.base64Canvas.getContext("2d");// 获取框的坐标和宽高let {  w, h, x, y } = data;base64Canvas.width = w;base64Canvas.height = h;base64Context.drawImage(img, x, y, w, h, 0, 0, w, h);let base64Img = base64Canvas.toDataURL("image/png");console.log(base64Img)

因为框本身就是在图片上切的，所以直接使用canvas的drawImage方法即可。

图片旋转

由于框是基于SVG画的，当图片旋转后，框的坐标其实还是基于正框下的位置，这里我想了好几种方法，最后觉得还是在基于正框切图下的基础上，再进行旋转最方便。也就是先执行上面的正常切图，再旋转~

rotateDegCutImg(w, h, rotateDeg, base64Img, callbackHandler) {    let canvas66 = document.createElement("canvas");    let ctx66 = canvas66.getContext("2d");    let img66 = new Image();    img66.setAttribute("crossOrigin", "anonymous");    img66.src = base64Img;    canvas66.width = w;    canvas66.height = h;    img66.onload = () => {      if (rotateDeg == 90) { // 90        // 宽高互换        canvas66.width = h;        canvas66.height = w;        ctx66.rotate(Math.PI / 2)        ctx66.drawImage(img66, 0, -h, w, h)      }      if (rotateDeg == 180) {        ctx66.rotate(Math.PI)        ctx66.drawImage(img66, -w, -h, w, h)      }      if (rotateDeg == 270) { // 270        // 宽高呼唤        canvas66.width = h;        canvas66.height = w;        ctx66.rotate(Math.PI / 2 * 3)        ctx66.drawImage(img66, -w, 0, w, h)      }      let img66Src = canvas66.toDataURL("image/png");      if (callbackHandler) {        callbackHandler(img66, img66Src)      }    }  }

关键词： 觉得还是 显示出来 的基础上