vue下canvas裁剪图片实例讲解

 更新时间:2020年04月16日 08:36:24   作者:搜戴斯  
在本篇文章里小编给大家整理了关于vue下canvas裁剪图片实例讲解内容,需要的朋友们可以参考下。

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

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

我的博客中还有关于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裁剪图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解如何运行vue项目

    详解如何运行vue项目

    这篇文章主要介绍了如何运行vue项目,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue如何根据权限生成动态路由、导航栏

    vue如何根据权限生成动态路由、导航栏

    这篇文章主要介绍了vue如何根据权限生成动态路由、导航栏,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue框架之goods组件开发详解

    Vue框架之goods组件开发详解

    这篇文章主要介绍了Vue框架之goodvs组件开发详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue3渲染器与编译器深入浅析

    Vue3渲染器与编译器深入浅析

    这篇文章主要为大家介绍了Vue3渲染器与编译器深入浅析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Vue之文件加载执行全流程

    Vue之文件加载执行全流程

    这篇文章主要介绍了Vue之文件加载执行全流程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue中前端代理跨域问题实例总结

    vue中前端代理跨域问题实例总结

    前后端分离进行项目开发,跨域问题不可避免,下面这篇文章主要给大家介绍了关于vue中前端代理跨域问题的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • VUE axios每次请求添加时间戳问题

    VUE axios每次请求添加时间戳问题

    这篇文章主要介绍了VUE axios每次请求添加时间戳问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue.js表单控件绑定示例盘点

    Vue.js表单控件绑定示例盘点

    这篇文章主要为大家介绍了一些Vue.js表单控件绑定示例盘点,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • vue3中调用api接口实现数据的渲染以及详情方式

    vue3中调用api接口实现数据的渲染以及详情方式

    这篇文章主要介绍了vue3中调用api接口实现数据的渲染以及详情方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue3中defineComponent 的作用详解

    vue3中defineComponent 的作用详解

    这篇文章主要介绍了vue3中defineComponent 的作用,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09

最新评论