js生成word中图片处理方法


Posted in Javascript onJanuary 06, 2018

首先功能是要求前台导出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中图片处理方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
Javascript面试经典套路reduce函数查重
Mar 23 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
详解js中let与var声明变量的区别
Apr 05 Javascript
JS+CSS实现过渡特效
Jan 02 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 #Javascript
浅谈webpack对样式的处理
Jan 05 #Javascript
js实现HTML中Select二级联动的实例
Jan 05 #Javascript
详解tween.js 中文使用指南
Jan 05 #Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 #Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 #Javascript
vue 中directive功能的简单实现
Jan 05 #Javascript
You might like
PHP消息队列用法实例分析
2016/02/12 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
csdn 博客的css样式 v3
2009/02/24 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
Vuex提升学习篇
2018/01/11 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
[05:16]《大圣!大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
pycharm 批量修改变量名称的方法
2019/08/01 Python
Python使用字典实现的简单记事本功能示例
2019/08/15 Python
Python datetime包函数简单介绍
2019/08/28 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
中专生自我鉴定
2013/12/17 职场文书
公务员综合考察材料
2014/02/01 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
python中如何对多变量连续赋值
2021/06/03 Python