vue下canvas裁剪图片实例讲解


Posted in Javascript onApril 16, 2020

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

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

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

HTML代码:

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

<canvas id="canvasImg1" style=" position: absolute; margin: 2px 0 0 0"></canvas>
<div id="dymImgCanv1" style=" display:none;">
<canvas id="dymCurrImg1" :src="leftImg.carImgUrl" width="1920" height="1080"></canvas>
</div>

JS截取图片方法

1裁剪方法传参

oMark2['canvas1'] = 'canvasImg2'; // 展示结果canvas id
oMark2['canvas2'] = 'dymCurrImg2'; //画布原始图片canvas id
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裁剪之后的结果展示(页面中展示);
    let res2 = oMark['ImgUrl'];
    let that = this;
    return new Promise(function (resolve, reject) {
     //图片剪切处理
     var canvas1 = document.getElementById(oMark['canvas2']);
     var canvas3 = document.getElementById(oMark['canvas1']);
     canvas1.height = 1080;
     canvas1.width = 1920;

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

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

      cxt1.drawImage(img, 0, 0, canvas1.width, canvas1.height); // --第一步-- 原图绘制在画布上 drawImage方法在画布上绘制图像、画布或视频。也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。



// 计算缩放好后的尺寸
      var srcX = oMark.offsetLeft * Rwidth;
      var srcY = oMark.offsetTop * Rheight;
      var sWidth = oMark.offsetWidth * Rwidth;
      var sHeight = oMark.offsetHeight * Rheight;
      var dataImg = 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画布中
      var img2 = canvas2.toDataURL("image/png"); // --第四步-- toDataURL()将canvas2画布保存为图像

      var cxt3 = canvas3.getContext("2d"); // getContext() 方法返回一个用于在画布上绘图的环境
      var img3 = new Image(); // 创建图像对象
      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裁剪图片内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
react-router实现按需加载
May 09 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 #Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 #Javascript
Vue Object 的变化侦测实现代码
Apr 15 #Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 #Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 #Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 #Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 #Javascript
You might like
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
比较完整的微信开发php代码
2016/08/02 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
获取input标签的所有属性的方法
2016/06/28 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
python encode和decode的妙用
2009/09/02 Python
python抓取百度首页的方法
2015/05/19 Python
python处理html转义字符的方法详解
2016/07/01 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Python输出指定字符串的方法
2020/02/06 Python
python实现控制台输出彩色字体
2020/04/05 Python
5款实用的python 工具推荐
2020/10/13 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
一组SQL面试题
2016/02/15 面试题
全神贯注教学反思
2014/02/03 职场文书
超越自我演讲稿
2014/05/21 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
电力工程合作意向书
2015/05/11 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python