js生成word中圖片處理方法
更新時(shí)間：2018年01月06日 09:09:44 作者：pdandan
下面小編就為大家分享一篇js生成word中圖片處理方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
首先功能是要求前臺(tái)導(dǎo)出word，但是前后臺(tái)是分離的，圖片存在后臺(tái)，所以就存在跨域問題。
導(dǎo)出文字都是沒有問題的（jquery.wordexport.js），但是導(dǎo)出圖片就存在問題了：
圖片是以鏈接形式存到word中，這樣如果是需要vpn的網(wǎng)站就會(huì)存在生成的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";//跨域必須使用，且后臺(tái)也得設(shè)置允許跨域
dataURL='';
Img.src=url;
Img.onload=function(){ //要先確保圖片完整獲取到，這是個(gè)異步事件
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)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)注冊頁面校驗(yàn)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
使用JavaScript實(shí)現(xiàn)網(wǎng)頁秒表功能（含開始、暫停、繼續(xù)、重置功能）
這篇文章主要介紹了使用JavaScript實(shí)現(xiàn)網(wǎng)頁秒表（含開始、暫停、繼續(xù)、重置功能）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
這篇文章主要給大家介紹了關(guān)于uniapp圖片展示自適應(yīng)等比例縮放方法的相關(guān)資料,在uniapp頁面展示中會(huì)遇到圖片展示問題,等比縮放或者自適應(yīng)view大小,需要的朋友可以參考下2023-10-10
本篇文章主要介紹了p5.js入門教程之小球動(dòng)畫示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了js 計(jì)算月/周的第一天和最后一天代碼,需要的朋友可以參考下2020-02-02
本文主要介紹了js事件冒泡與事件捕獲的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
本篇文章主要介紹了博客內(nèi)容進(jìn)度插件的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了詳解如何在JS代碼中消滅for循環(huán)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
在JavaScript中實(shí)現(xiàn)命名空間...2006-11-11
IE7提供XMLHttpRequest對象為兼容...2007-03-03