1、jQuery
2、Fabric.js
Fabric.js是一个对canvas进行封装的Javascript库，主要的功能包括在canvas上创建和填充图形，比如矩形、圆形、多边形；生成的图像自带缩放、旋转、拖拽等功能。
3、PDF.js
PDF.js 是一个使用 HTML5 构建的便携式文档格式查看器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="js/fabric.min.js"></script>
<script type="text/javascript" src="js/pdf.min.js"></script>
<script type="text/javascript" src="js/pdf.worker.min.js"></script>
</head>
<body>
<div>
<input id="fileInput" type="file" accept="application/pdf,image/jpeg,image/png"/>
</div>
<canvas id="canvas" width="500" height="620" style="border: 1px solid #000;">
</canvas>
</body>
<script type="text/javascript">
var currentSrc; // 图片src
canvas = new fabric.Canvas('canvas', {
backgroundColor: '#fff'
})
$('#fileInput').change(function(event) {
var file = event.target.files[0]; // 获取文件对象
if(file&&file.type=='image/jpeg' || file.type=='image/png'){
console.log('图',file)
var reader = new FileReader();
reader.onload = function(e) {
// 处理读取结果
currentSrc = e.target.result;
createImg(100,100)
console.log('currentSrc',currentSrc);
};
reader.readAsDataURL(file); // 正确使用文件对象调用方法
}else if(file.type=='application/pdf'){
console.log('file',file,)
new Promise((resolve, reject) => {
let reader = new FileReader()
reader.onloadend = function(e) { //读取完成触发，无论失败还是成功
resolve(e.target.result) //base64格式
}
reader.readAsDataURL(event.target.files[0])
}).then(resolve => {
// 读取多张
pdfToImage(resolve)
})
}
});
// 多张
async function pdfToImage(pdfUrl) {
(await importPdfToFabric(pdfUrl)).map(async c => {
// console.log('c------',c);
const fabricImage = new fabric.Image(await c, {
top:50,
left:30,
scaleX: 0.45,
scaleY: 0.45
});
// canvas.clear();
canvas.add(fabricImage);
console.log('文件存储',canvas.toJSON())
// console.log('cccc',JSON.stringify(canvas))
})
};
async function importPdfToFabric(pdfUrl) {
var loadingTask = pdfjsLib.getDocument(pdfUrl);
return await loadingTask.promise.then( async (pdf) => {
const numPages = pdf.numPages;
let nar = new Array(numPages).fill(0);
for(var ii=1;ii<=numPages;ii++){
nar[ii-1] = await pdfgetPage(ii,pdf)
}
return nar;
});
}
async function pdfgetPage(pageNumber,pdf) {
let rss;
await pdf.getPage(pageNumber).then((page) => {
// console.log('page',page,pageNumber);
const viewport = page.getViewport({ scale: window.devicePixelRatio });
const canvas1 = document.createElement('canvas');
const context = canvas1.getContext('2d');
canvas1.height = viewport.height; // 1330
canvas1.width = viewport.width; // 930
const renderContext = {
canvasContext: context,
viewport: viewport
};
const renderTask = page.render(renderContext);
rss = renderTask.promise.then(() => canvas1);
});
return rss;
};
// 绘制图片
function createImg(top, left) {
var img = document.createElement("img");
img.onload = function () {
var canvasImage = new fabric.Image(img, {
top : top,
left : left,
angle: 0,
opacity: 1,
scaleX: 0.1,
scaleY: 0.1
})
canvas.add(canvasImage)
// console.log('canvas toJSON', canvas.toJSON(),canvasImage)
}
img.crossOrigin = 'Anonymous';
img.src = currentSrc;
};
</script>
</html>
