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 相关文章推荐
js禁止小键盘输入数字功能代码
Aug 01 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
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
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
window.open的功能全解析
2006/10/10 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
python进阶教程之模块(module)介绍
2014/08/30 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
浅析python的Lambda表达式
2019/02/27 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
什么样的创业计划书可行性高?
2014/02/01 职场文书
高一课前三分钟演讲稿
2014/09/13 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
群众路线个人剖析材料及整改措施
2014/11/04 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
2015年档案室工作总结
2015/05/23 职场文书
军事理论课感想
2015/08/11 职场文书
2019新员工心得体会
2019/06/25 职场文书
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python