微客导航 » 文章资讯 » vue下canvas裁剪图片实例讲解

vue下canvas裁剪图片实例讲解

2023-07-27 03:52:05 213

由于时间关系代码没有做整理大家有什么不懂得可以留言；

代码的主题思路备注中都有大家可以看看

我的博客中还有关于canvas绘制矩形的文章有需要的可以看一下；

HTML代码：

第一行的canvas为裁剪后展示用；div中的canvas存放原有尺寸的图片

JS截取图片方法

1裁剪方法传参

oMark2['canvas1']='canvasImg2';//展示结果canvasid
oMark2['canvas2']='dymCurrImg2';//画布原始图片canvasid
oMark2['ImgUrl']=carImgUrl;
oMark2['offsetLeft']=location[0];
oMark2['offsetTop']=location[2];
oMark2['offsetWidth']=location[1]-location[0];
oMark2['offsetHeight']=location[3]-location[2];

2裁剪方法（注意：下边方法中关于构建的画布canvas1，canvas3与两个canvas标签ID的命名是不对应的，方便大家理解我把关系捋出来

canvas1=oMark['canvas2']='dymCurrImg2'

canvas3=oMark['canvas1']='canvasImg2'

TailoringImg(oMark){
//设置三个canvas分别为canvas1，canvas2，canvas3
//每个canvas的作用canvas1原始图片画布（页面中隐藏）；
//canvas2原图和裁剪结果之间转换；
//canvas3裁剪之后的结果展示（页面中展示）；
letres2=oMark['ImgUrl'];
letthat=this;
returnnewPromise(function(resolve,reject){
//图片剪切处理
varcanvas1=document.getElementById(oMark['canvas2']);
varcanvas3=document.getElementById(oMark['canvas1']);
canvas1.height=1080;
canvas1.width=1920;

canvas3.height=198;
canvas3.width=400;
varcxt1=canvas1.getContext("2d");//getContext()方法返回一个用于在画布上绘图的环境
varimg=newImage();
img.crossOrigin='';
img.src=res2;
varcanvas2=document.createElement("canvas");//创建虚拟画布环境
varcxt2=canvas2.getContext("2d");

img.onload=function(){
//计算图片缩放比例
varRwidth=canvas1.width/img.width;
varRheight=canvas1.height/img.height;

cxt1.drawImage(img,0,0,canvas1.width,canvas1.height);//--第一步--原图绘制在画布上drawImage方法在画布上绘制图像、画布或视频。也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
//计算缩放好后的尺寸
varsrcX=oMark.offsetLeft*Rwidth;
varsrcY=oMark.offsetTop*Rheight;
varsWidth=oMark.offsetWidth*Rwidth;
varsHeight=oMark.offsetHeight*Rheight;
vardataImg=cxt1.getImageData(srcX,srcY,sWidth,sHeight);//--第二步--getImageData()复制原图画布上指定矩形的像素数据

canvas2.width=sWidth;
canvas2.height=sHeight;
cxt2.putImageData(dataImg,0,0,0,0,canvas2.width,canvas2.height);//--第三步--通过putImageData()将原图图像数据放到canvas2画布中
varimg2=canvas2.toDataURL("image/png");//--第四步--toDataURL()将canvas2画布保存为图像

varcxt3=canvas3.getContext("2d");//getContext()方法返回一个用于在画布上绘图的环境
varimg3=newImage();//创建图像对象
img3.crossOrigin='';//图像跨域设置
img3.src=img2;//设置图像地址
img3.onload=function(){//onload内可以获取图像信息
cxt3.drawImage(img3,0,0,canvas3.width,canvas3.height)//--第五步--将canvas2画布生成的图像放在canvas3画布中

};
resolve();
}
})
},

到此这篇关于vue下canvas裁剪图片实例讲解的文章就介绍到这了,更多相关vue下canvas裁剪图片内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
3162201930
czq8825@qq.com

vue下canvas裁剪图片实例讲解

热门推荐

随机推荐