js生成word中图片处理方法
程序员文章站
2022-07-02 16:37:49
首先功能是要求前台导出word,但是前后台是分离的,图片存在后台,所以就存在跨域问题。
导出文字都是没有问题的(jquery.wordexport.js),但是导出图片就...
首先功能是要求前台导出word,但是前后台是分离的,图片存在后台,所以就存在跨域问题。
导出文字都是没有问题的(jquery.wordexport.js),但是导出图片就存在问题了:
图片是以链接形式存到word中,这样如果是需要vpn的网站就会存在生成的word在没有vpn的情况下打不开,有vpn的情况下必须启用编辑才能加载出来图片。
解决办法:将图片转换成data url格式,再导出。
详细代码如下所示:
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";//跨域必须使用,且后台也得设置允许跨域 dataurl=''; img.src=url; img.onload=function(){ //要先确保图片完整获取到,这是个异步事件 var canvas = document.createelement("canvas"), //创建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'); //转换图片为dataurl condataurl?condataurl(dataurl,charimg):null; //调用回调函数 }; } function condataurl(dataurl,charimg){ charimg.src=dataurl; //console.log(charimg); }
以上这篇js生成word中图片处理方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
上一篇: Vue3.0结合bootstrap做多页面应用(1)创建项目
下一篇: 还是家里的幽默温馨啊!
推荐阅读
-
Android编程中图片特效处理方法小结
-
对python PLT中的image和skimage处理图片方法详解
-
在Word中快速的将图片背景去掉只保留下花朵的方法
-
winform 替换word文档中的字段(包含图片添加),生成导出PDF文件(也可是word文件)
-
深入理解在JS中通过四种设置事件处理程序的方法
-
Aspose.Words for .NET动态生成word文档中的图片或水印
-
Android中3种图片压缩处理方法
-
node.js中实现kindEditor图片上传功能的方法教程
-
JS中处理时间之setUTCMinutes()方法的使用
-
PHP替换Word中变量并导出PDF图片的实现方法