欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue下canvas裁剪圖片實(shí)例講解

 更新時(shí)間:2020年04月16日 08:36:24   作者:搜戴斯  
在本篇文章里小編給大家整理了關(guān)于vue下canvas裁剪圖片實(shí)例講解內(nèi)容,需要的朋友們可以參考下。

由于時(shí)間關(guān)系 代碼沒(méi)有做整理大家有什么不懂得可以留言;

代碼的主題思路備注中都有 大家可以看看

我的博客中還有關(guān)于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'; // 展示結(jié)果canvas id
oMark2['canvas2'] = 'dymCurrImg2'; //畫(huà)布原始圖片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裁剪方法 (注意:下邊方法中關(guān)于構(gòu)建的畫(huà)布 canvas1,canvas3與兩個(gè)canvas標(biāo)簽ID的命名是不對(duì)應(yīng)的,方便大家理解我把關(guān)系捋出來(lái)

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

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

TailoringImg(oMark) {
    // 設(shè)置三個(gè)canvas 分別為 canvas1 ,canvas2,canvas3
    //  每個(gè)canvas的作用 canvas1原始圖片畫(huà)布(頁(yè)面中隱藏);
    //  canvas2原圖和裁剪結(jié)果之間轉(zhuǎn)換;
    //  canvas3裁剪之后的結(jié)果展示(頁(yè)面中展示);
    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() 方法返回一個(gè)用于在畫(huà)布上繪圖的環(huán)境
     var img = new Image();
     img.crossOrigin = '';
     img.src = res2;
     var canvas2 = document.createElement("canvas"); // 創(chuàng)建虛擬畫(huà)布環(huán)境
     var cxt2 = canvas2.getContext("2d");

     img.onload = function () {
      // 計(jì)算圖片縮放比例
      var Rwidth = canvas1.width / img.width;
      var Rheight = canvas1.height / img.height;

      cxt1.drawImage(img, 0, 0, canvas1.width, canvas1.height); // --第一步-- 原圖繪制在畫(huà)布上 drawImage方法在畫(huà)布上繪制圖像、畫(huà)布或視頻。也能夠繪制圖像的某些部分,以及/或者增加或減少圖像的尺寸。
        // 計(jì)算縮放好后的尺寸
      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() 復(fù)制原圖畫(huà)布上指定矩形的像素?cái)?shù)據(jù)

      canvas2.width = sWidth;
      canvas2.height = sHeight;
      cxt2.putImageData(dataImg, 0, 0, 0, 0, canvas2.width, canvas2.height); // --第三步-- 通過(guò) putImageData() 將原圖圖像數(shù)據(jù)放到canvas2畫(huà)布中
      var img2 = canvas2.toDataURL("image/png"); // --第四步-- toDataURL()將canvas2畫(huà)布保存為圖像

      var cxt3 = canvas3.getContext("2d"); // getContext() 方法返回一個(gè)用于在畫(huà)布上繪圖的環(huán)境
      var img3 = new Image(); // 創(chuàng)建圖像對(duì)象
      img3.crossOrigin = ''; // 圖像跨域設(shè)置
      img3.src = img2;    // 設(shè)置圖像地址
      img3.onload = function () { // onload內(nèi)可以獲取圖像信息
       cxt3.drawImage(img3, 0, 0, canvas3.width, canvas3.height) // --第五步-- 將canvas2畫(huà)布生成的圖像放在canvas3畫(huà)布中

      };
      resolve();
     }
    })
   },

到此這篇關(guān)于vue下canvas裁剪圖片實(shí)例講解的文章就介紹到這了,更多相關(guān)vue下canvas裁剪圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 詳解如何運(yùn)行vue項(xiàng)目

    詳解如何運(yùn)行vue項(xiàng)目

    這篇文章主要介紹了如何運(yùn)行vue項(xiàng)目,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • vue如何根據(jù)權(quán)限生成動(dòng)態(tài)路由、導(dǎo)航欄

    vue如何根據(jù)權(quán)限生成動(dòng)態(tài)路由、導(dǎo)航欄

    這篇文章主要介紹了vue如何根據(jù)權(quán)限生成動(dòng)態(tài)路由、導(dǎo)航欄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • Vue框架之goods組件開(kāi)發(fā)詳解

    Vue框架之goods組件開(kāi)發(fā)詳解

    這篇文章主要介紹了Vue框架之goodvs組件開(kāi)發(fā)詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-01-01
  • Vue3渲染器與編譯器深入淺析

    Vue3渲染器與編譯器深入淺析

    這篇文章主要為大家介紹了Vue3渲染器與編譯器深入淺析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-02-02
  • Vue之文件加載執(zhí)行全流程

    Vue之文件加載執(zhí)行全流程

    這篇文章主要介紹了Vue之文件加載執(zhí)行全流程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • vue中前端代理跨域問(wèn)題實(shí)例總結(jié)

    vue中前端代理跨域問(wèn)題實(shí)例總結(jié)

    前后端分離進(jìn)行項(xiàng)目開(kāi)發(fā),跨域問(wèn)題不可避免,下面這篇文章主要給大家介紹了關(guān)于vue中前端代理跨域問(wèn)題的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-04-04
  • VUE?axios每次請(qǐng)求添加時(shí)間戳問(wèn)題

    VUE?axios每次請(qǐng)求添加時(shí)間戳問(wèn)題

    這篇文章主要介紹了VUE?axios每次請(qǐng)求添加時(shí)間戳問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • Vue.js表單控件綁定示例盤(pán)點(diǎn)

    Vue.js表單控件綁定示例盤(pán)點(diǎn)

    這篇文章主要為大家介紹了一些Vue.js表單控件綁定示例盤(pán)點(diǎn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-07-07
  • vue3中調(diào)用api接口實(shí)現(xiàn)數(shù)據(jù)的渲染以及詳情方式

    vue3中調(diào)用api接口實(shí)現(xiàn)數(shù)據(jù)的渲染以及詳情方式

    這篇文章主要介紹了vue3中調(diào)用api接口實(shí)現(xiàn)數(shù)據(jù)的渲染以及詳情方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue3中defineComponent?的作用詳解

    vue3中defineComponent?的作用詳解

    這篇文章主要介紹了vue3中defineComponent?的作用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-09-09

最新評(píng)論