根据图片的URL生成PDF保存到本地(前台js)

Posted jiangcm

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了根据图片的URL生成PDF保存到本地(前台js)相关的知识,希望对你有一定的参考价值。

//需要引用html2canvas.js和jspdf.js

SavePDF:function(e){
var that = this;
$.post("/Biz/DailyExpenseApply/GetpictureToPDF?expenseApplyId=" + this.expenseApply.ExpenseApplyID,function(res){
_.each(res,function(m){
getBase64(m.FileUrl,(dataURL)=>{
debugger
// 三个参数,第一个方向,第二个单位,第三个尺寸格式
var doc = new jsPDF(‘landscape‘,‘pt‘,[205, 115])

// 将图片转化为dataUrl
var imageData = dataURL;

doc.addImage(imageData, ‘PNG‘, 0, 0, 205, 115);
doc.save(m.DOCNAME+‘.pdf‘);
//var base64str = doc.output("datauristring");

});

})
})
},

 

function getBase64(url,callback){//获取图片url的地址转换成base64
//通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 <img> 省去了 append(),也就避免了文档冗余和污染
var Img = new Image(),
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中
debugger
dataURL=canvas.toDataURL(‘image/jpeg‘); //转换图片为dataURL
callback?callback(dataURL):null; //调用回调函数
};
}

































以上是关于根据图片的URL生成PDF保存到本地(前台js)的主要内容,如果未能解决你的问题,请参考以下文章

根据图片的url地址下载图片到本地保存代码片段

从网上通过url获得图片能否先根据url压缩完在保存到本地java怎么实现啊,有没有会的啊,大神们,压缩后的图

使用wkhtmltopdf工具生成pdf

JAVA如何将本地图片变成网络URL 再把URL传给前台

js截图及绕过服务器图片保存至本地(html2canvas)

js保存图片到手机