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

js生成word中圖片處理方法

 更新時間：2018年01月06日 09:09:44   作者：pdandan  
下面小編就為大家分享一篇js生成word中圖片處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

首先功能是要求前臺導(dǎo)出word，但是前后臺是分離的，圖片存在后臺，所以就存在跨域問題。

導(dǎo)出文字都是沒有問題的（jquery.wordexport.js），但是導(dǎo)出圖片就存在問題了：

圖片是以鏈接形式存到word中，這樣如果是需要vpn的網(wǎng)站就會存在生成的word在沒有vpn的情況下打不開，有vpn的情況下必須啟用編輯才能加載出來圖片。

解決辦法：將圖片轉(zhuǎn)換成Data URL格式，再導(dǎo)出。

詳細(xì)代碼如下所示：

function changeImgToDataurl(){
 var charImg = document.all("exportdom").getElementsByTagName("img"); 
 var imgURLs = ""; 
 for (var i = 0; i < charImg.length; i++) { 
   var imgURL = charImg[i].currentSrc; 
   getBase64(imgURL,charImg[i]);
 } 
}
function getBase64(url,charImg){
  var Img = new Image();
  Img.crossOrigin = "Anonymous";//跨域必須使用，且后臺也得設(shè)置允許跨域
  dataURL='';
  Img.src=url;
  Img.onload=function(){ //要先確保圖片完整獲取到，這是個異步事件
   var canvas = document.createElement("canvas"), //創(chuàng)建canvas元素
   width=Img.width, //確保canvas的尺寸和圖片一樣
   height=Img.height;
   canvas.width=width;
   canvas.height=height;
   canvas.getContext("2d").drawImage(Img,0,0,width,height); //將圖片繪制到canvas中
   dataURL=canvas.toDataURL('image/jpg'); //轉(zhuǎn)換圖片為dataURL
   condataurl?condataurl(dataURL,charImg):null; //調(diào)用回調(diào)函數(shù)
  };
} 
function condataurl(dataURL,charImg){
 charImg.src=dataURL;
 //console.log(charImg);
}

以上這篇js生成word中圖片處理方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • javascript Excel操作知識點

    javascript Excel操作知識點

    使用JavaScript中的ActiveXObject填充并設(shè)置Excel格式
    2009-04-04
  • 那些項目中常見的TypeScript錯誤總結(jié)

    那些項目中常見的TypeScript錯誤總結(jié)

    這篇文章主要給大家總結(jié)介紹了一些項目中常見的TypeScript錯誤的相關(guān)資料,如果你想查看所有的錯誤信息和錯誤碼,可以瀏覽TypeScript的源代碼倉庫,當(dāng)然隨著?ts?版本的更新,官網(wǎng)也會逐漸增加更多新的類型錯誤,需要的朋友可以參考下
    2022-03-03
  • uni-app小程序中父組件和子組件傳值的實現(xiàn)實例

    uni-app小程序中父組件和子組件傳值的實現(xiàn)實例

    uniapp父子組件引用傳值,和vue的一樣,沒有小程序那樣的麻煩,下面這篇文章主要給大家介紹了關(guān)于uni-app小程序中父組件和子組件傳值的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-08-08
  • 微信小程序海報繪制示例講解

    微信小程序海報繪制示例講解

    這篇文章主要介紹了微信小程序海報繪制示例,海報分享功能在許多應(yīng)用中應(yīng)該是很常見的,因為它作為一種常用的應(yīng)用推廣和拉新的方式,下面我們來通過案例學(xué)習(xí)如何繪制
    2024-05-05
  • javascript圖像處理—仿射變換深度理解

    javascript圖像處理—仿射變換深度理解

    上一篇文章，我們講解了圖像金字塔，這篇文章我們來了解仿射變換,仿射？任何仿射變換都可以轉(zhuǎn)換成，乘以一個矩陣（線性變化），再加上一個向量(平移變化),接下來詳細(xì)介紹，感興趣的朋友可以了解下
    2013-01-01
  • javascript 3d 逐偵產(chǎn)品展示(核心精簡)

    javascript 3d 逐偵產(chǎn)品展示(核心精簡)

    這篇文章主要介紹了javascript實現(xiàn)的3d逐偵產(chǎn)品展示,需要的朋友可以參考下
    2014-03-03
  • JS實現(xiàn)深度優(yōu)先搜索求解兩點間最短路徑

    JS實現(xiàn)深度優(yōu)先搜索求解兩點間最短路徑

    這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)深度優(yōu)先搜索求解兩點間最短路徑，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-01-01
  • 小程序?qū)崿F(xiàn)多選框功能

    小程序?qū)崿F(xiàn)多選框功能

    這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)多選框功能，小程序?qū)崿F(xiàn)單選全選多選刪除操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-10-10
  • javascript實現(xiàn)表格排序 編輯 拖拽 縮放

    javascript實現(xiàn)表格排序 編輯 拖拽 縮放

    這篇文章主要介紹了javascript實現(xiàn)表格排序 編輯 拖拽 縮放的方法，效果非常不錯，只是兼容性還有些問題，有待優(yōu)化。
    2015-01-01
  • layui使用button按鈕 點擊出現(xiàn)彈層 彈層中加載表單的實例

    layui使用button按鈕 點擊出現(xiàn)彈層 彈層中加載表單的實例

    今天小編就為大家分享一篇layui使用button按鈕 點擊出現(xiàn)彈層 彈層中加載表單的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09

最新評論