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 相关文章推荐
两个Javascript小tip资料
Nov 23 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
js实现圆盘记速表
Aug 03 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
vue组件父与子通信详解(一)
Nov 07 Javascript
axios简单实现小程序延时loading指示
Jul 30 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 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上显示JFreechart画的统计图方法
2013/11/03 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
js查找父节点的简单方法
2008/06/28 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
vuejs选中当前样式active的实例
2018/08/22 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
python中map、any、all函数用法分析
2015/04/21 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
美国性感内衣店:Yandy
2018/06/12 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
优秀的自荐信要注意哪些
2014/01/03 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
发布会邀请函
2015/01/31 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python