【vue】canvas图片剪切

对图片进行遮挡有 overflow: hidden、clip-path 以及 mask-image。
overflow是进行超出不显示，通过父元素遮挡超出部分。但是效果不理想。
clip-path是进行裁剪，但是裁剪之后image所占空间不会改变。在线工具
mask-image是进行image遮挡，没有实践，据说遮挡之后image所占空间不会改变。
最后，还是选择使用canvas进行裁剪工作。
image会存在底部有间隙的问题？
解决办法：对image设置display:block;

一、图片剪裁

处理思路
首先创建canvas对像。
指定canvas的高度宽度。
计算原图需要剪切的相关参数。
通过drawImage方法将需要的部分画上去。
通过toDataURL方法获取图片base64的值。
完成，后续可对base64值进行其他操作。
关键方法
最主要的drawImage方法有一下传参方式：

drawImage(img, dx, dy)
drawImage(img, dx, dy, dw, dh)
drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)
各参数说明：

img：需要插入的img/video/canvas 元素。
dx/dy：canvas的开始绘制点位。
dw/dh：canvas的绘制区域大小。
sx/sy：image的开始绘制点位。
sw/wh：image的绘制区域大小。

二、源码
我这里做的是九宫格所以对每一个块进行不同的裁剪。

createCanvasToImg(key, url){if (!url){this.sudokuImg[key] = canvasToImg;return}let canvas, context;// canvas 转 imagelet canvasToImg;// 创建canvascanvas = document.createElement("canvas");context = canvas.getContext("2d");// 加载资源let luckyCardImg = new Image();luckyCardImg.setAttribute("crossOrigin", "anonymous");  // 解决跨域 Canvas 污染问题luckyCardImg.src = url + '?time=' + Date.now();luckyCardImg.onload =  () => {canvas.width = luckyCardImg.width;canvas.height = luckyCardImg.height;// 注入幸运卡switch (key) {case 1:context.drawImage(luckyCardImg, 0, 0, luckyCardImg.width*0.91, luckyCardImg.height*0.91, 0, 0, luckyCardImg.width, luckyCardImg.height);break;case 2:context.drawImage(luckyCardImg, luckyCardImg.width*0.09, 0, luckyCardImg.width*0.82, luckyCardImg.height*0.91, 0, 0, luckyCardImg.width, luckyCardImg.height);break;case 3:context.drawImage(luckyCardImg, luckyCardImg.width*0.09, 0, luckyCardImg.width*0.91, luckyCardImg.height*0.91, 0, 0, luckyCardImg.width, luckyCardImg.height);break;case 4:context.drawImage(luckyCardImg, 0, luckyCardImg.height*0.09, luckyCardImg.width*0.91, luckyCardImg.height*0.82, 0, 0, luckyCardImg.width, luckyCardImg.height);break;case 5:context.drawImage(luckyCardImg, luckyCardImg.width*0.09, luckyCardImg.height*0.09, luckyCardImg.width*0.82, luckyCardImg.height*0.82, 0, 0, luckyCardImg.width, luckyCardImg.height);break;case 6:context.drawImage(luckyCardImg, luckyCardImg.width*0.09, luckyCardImg.height*0.09, luckyCardImg.width*0.91, luckyCardImg.height*0.82, 0, 0, luckyCardImg.width, luckyCardImg.height);break;case 7:context.drawImage(luckyCardImg, 0, luckyCardImg.height*0.09, luckyCardImg.width*0.91, luckyCardImg.height*0.91, 0, 0, luckyCardImg.width, luckyCardImg.height);break;case 8:context.drawImage(luckyCardImg, luckyCardImg.width*0.09, luckyCardImg.height*0.09, luckyCardImg.width*0.82, luckyCardImg.height*0.91, 0, 0, luckyCardImg.width, luckyCardImg.height);break;case 9:context.drawImage(luckyCardImg, luckyCardImg.width*0.09, luckyCardImg.height*0.09, luckyCardImg.width*0.91, luckyCardImg.height*0.91, 0, 0, luckyCardImg.width, luckyCardImg.height);break;default:break;}canvasToImg = canvas.toDataURL("image/png");this.sudokuImg[key] = canvasToImg;}},

结果如下：

【vue】canvas图片剪切相关推荐

VUE+Canvas实现输入文字生成对应的字体图片小功能
你是不是经常浏览字体网站的时候,发现他们的"字体生成器"和预览功能很好奇,为什么输入框输入文字之后,点击预览,下面都会修改对应的字体内容,以便达到了没有安装字体也可以预览这个字体效 ...
php图片特效,php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
本文实例讲述了php_imagick实现图片剪切.旋转.锐化.减色或增加特效的方法.分享给大家供大家参考.具体分析如下: 一个可以供PHP调用ImageMagick功能的PHP扩展.使用这个扩展可以使 ...
移动端html5手写板,Vue+canvas实现移动端手写板步骤详解
这次给大家带来Vue+canvas实现移动端手写板步骤详解,Vue+canvas实现移动端手写板的注意事项有哪些,下面就是实战案例,一起来看一下. 清除保存 Canvas画板 var draw; v ...
UWP 图片剪切旋转工具
原文:UWP 图片剪切旋转工具好久没撸随笔了,明天终于放假休息了..准备去进行信仰充值,看<魔兽>去(话说surface phone 好久出,让我这个做UWP的也充点信仰..) 先上下效 ...
android 拍照图片剪切
对于照片拍照上传应该有很多新手不是很清楚,这里我把我多方学习的代码分享给大家. 图片剪切代码上传这里是拍照不裁剪的代码 package com.rui.cameratest;import java ...
小程序_图片剪切功能（支持多图片上传）
前端图片剪切上传功能是常见的功能,在开发过程中,研发一个这样的功能要花的时间也会很多,现在把一个研发好了的图片剪切插件发出来.支持剪切和大小缩放. wxml 1  ...
vue+vant图片上传压缩图片大小
vue+vant图片上传压缩图片大小可能在项目中大家都会遇到文件上传的需求,比如头像,图片等,但是太大的文件上传会给服务器造成很大大压力,那么我们就需要压缩上传的文件其实这儿所说的压缩,就是图片重 ...
vue+canvas实现手写签字画板
vue+canvas实现手写签字画板效果预览体验地址用途涂鸦画板签名板实现使用canvas,通过监听鼠标动作来进行绘图. 关键代码如下: drawing(event){if(!this ...
vue实现图片下载功能so easy
vue实现图片下载功能so easy 1.在前端实现图片下载分为同源图片下载和非同源图片下载 2.解决方案可以根据同源和非同源来制定同源图片下载方案 html中可以这样写 <a href=&q ...

【vue】canvas图片剪切

【vue】canvas图片剪切相关推荐

最新文章

热门文章