js生成word中图片处理
首先功能是要求前台导出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 = ; 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,,,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中图片处理的更多相关文章
- 一段JS控制TD中图片的大小的代码
一段JS控制TD中图片的大小的代码 <table><tr><td id="otd"><div></div><img ...
- 【java】Freemarker 动态生成word(带图片表格)
1.添加freemarker.jar 到java项目. 2.新建word文档. 3.将文档另存为xml 格式. 4.将xml格式化后打开编辑(最好用notepad,有格式),找到需要替换的内容,将内容 ...
- HydroCMS-用ueditor无法实现word中图片转存的问题
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...
- Ckeditor IE下粘贴word中图片问题
自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...
- 利用VBA宏批量解决Word中图片大小、居中设置
需求:经常阅读网上的研报(没钱买排版漂亮的高质量研报),有些需要保存的复制下来到word里,图片很大都超出word的边界了,也没有居中,手工一张张调整不现实,上百页的研报,几十张图片. 解决方案:利用 ...
- Word中图片自动编号且与文中引用的编号对应
当我们在进行大篇幅 word 文档的编写时, 为了节约修改文章中图片所花费的大量时间, 可以将图片自动编号,且让文中引用的顺序跟着图片顺序的变化而变化,具体操作如下: 1. 将鼠标定在欲加编号的下方, ...
- ueditor粘贴word中图片
最近公司做项目需要实现一个功能,在网页富文本编辑器中实现粘贴Word图文的功能. 我们在网站中使用的Web编辑器比较多,都是根据用户需求来选择的.目前还没有固定哪一个编辑器 有时候用的是UEditor ...
- js获取页面中图片的总数
查看效果:http://keleyi.com/keleyi/phtml/image/9.htm 下面是完整代码: <html><body><div id="ke ...
- node.js生成验证码及图片
示例代码: var svgCaptcha = require('svg-captcha'); var fs = require('fs'); var codeConfig = { size: 5,// ...
随机推荐
- 闲来无事研究一下酷狗缓存文件kgtemp的加密方式
此贴为本人原创,转载请注明出处 序 前几天更新了被打入冷宫很久的酷狗,等进入之后就感觉菊花一紧----试 听 居 然 都 要 开 通 音 乐 包(高品和无损)才行了,WTF! 这意味着以前缓存的都听不 ...
- macox下编译snappy静态库
源代码地址:https://github.com/google/snappy 下载 git clone https://github.com/google/snappy 编译 进入snappy源代码文 ...
- struts2 maven整合tiles3
最新项目发现使用tiles能够很好的将多个页面组合起来,以下就是配置信息,使用tiles3 1.首先配置maven pom.xml加入例如以下: <dependency> <grou ...
- 页面输入的数据格式转换类:BaseAction(经常使用于Struts框架中)
在我们接收页面传来的数据时,这些数据都是以String类型接收的,所以要进行数据格式转换,这时候就能够统一为它们进行转换,并且在处理这些数据的类中能够继承ActionSupport类,然后让每个接收数 ...
- Java -Xms -Xmx -Xss -XX:MaxNewSize -XX:MaxPermSize含义记录
出现java.lang.OutOfMemoryError异常时,常使用的方法便是将例如以下配置语句: -Xms512m -Xmx512m -Xss1024k -XX:MaxNewSize=256M - ...
- AB串
题目: 给定n个A和2n个B.用这些字符拼成一个字符串.要求这个串的全部前缀和后缀B的个数始终不少于A. (一个字符串的前缀是仅仅从开头到某个位置为止的子串,后缀是仅仅从某个位置到结尾的子串). 输入 ...
- JAVA-UML
UML(UnifiedModelingLanguage)(统一建模语言或标准建模语言) 它是模型化的软件系统开发图形语言 为软件开发所有阶段提供模型化,可视化支持 UM2.2中定义了14中图示 三种常 ...
- Python2下载单张图片和爬取网页图片
一.需求分析 1.知道图片的url地址,将图片下载到本地. 2.知道网页地址,将图片列表中的图片全部下载到本地. 二.准备工作 1.开发系统:win7 64位. 2.开发环境:python2.7. 3 ...
- 为 NativeScript 项目添加 iOS / Android 平台 API 的智能感知
使用 NativeScript ,我们可以很容易的调用平台的原生 API,在开发过程中,我们可以添加这些 API 的 d.ts 文件来提供智能感知,帮助我们更方便的构建媲美原生的 APP. 首先通过 ...
- presto
presto中文站:http://prestodb-china.com/ 进入hadoop机器,进入presto所在bin目录:presto --server localhost:9090 --cat ...