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; // 图片srccanvas = 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; // 1330canvas1.width = viewport.width; // 930const 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>
