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 相关文章推荐
JS 实现导航栏悬停效果
Sep 23 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
jQuery拖拽div实现思路
Feb 19 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
vue项目打包部署到服务器的方法示例
Aug 27 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
Oct 11 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 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
dedecms模版制作使用方法
2007/04/03 PHP
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
destoon二次开发入门示例
2014/06/20 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
Javascript Object 对象学习笔记
2014/12/17 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
python中返回矩阵的行列方法
2018/04/04 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
python程序封装为win32服务的方法
2021/03/07 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
甲方资料员岗位职责
2013/12/13 职场文书
房屋改造计划书
2014/01/10 职场文书
《春晓》教学反思
2014/04/20 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
公司停电通知
2015/04/15 职场文书
运动会观后感
2015/06/09 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书