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 相关文章推荐
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
浅谈js中的this问题
Aug 31 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 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
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
Python实现批量下载文件
2015/05/17 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
北京一家公司的.net开发工程师笔试题
2012/04/17 面试题
什么是设计模式
2012/06/17 面试题
工商管理应届生求职信
2013/10/07 职场文书
经典商业广告词
2014/03/13 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
区域经理岗位职责
2015/02/02 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android
MySQL查询日期时间
2022/05/15 MySQL