在vue项目中使用canvas加载图片不显示问题

<canvas id='mycanvas' width='600' height="600"></canvas>
import imgsrc from '@/assets/logo.png';
 getcanvas() {
      let mycanvas = document.querySelector("#mycanvas");
      const ctx = mycanvas.getContext("2d");
 var img = new Image();
      img.src = imgsrc;
 img.onload = function() {
        //   console.log(111)
          ctx.drawImage(img,0,0, 50, 50);
            console.log(img);
      }
    },

解决:把图片的路径import引进来,img.src赋值引入的路径;

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目使用pdfjs-dist是相对简单的。下面是一些步骤来帮助你进行集成: 1. 首先,你需要使用npm或yarn安装pdfjs-dist。在终端运行以下命令: ``` npm install pdfjs-dist ``` 或者 ``` yarn add pdfjs-dist ``` 2. 安装完成后,在你的Vue组件引入pdfjs-dist库。可以在需要使用的组件添加以下代码: ```javascript import pdfjsLib from 'pdfjs-dist' ``` 3. 接下来,你需要加载PDF文档并显示它。你可以在Vue组件的方法添加以下代码来加载显示PDF: ```javascript loadPDF() { const url = '/path/to/your/pdf/document.pdf' pdfjsLib.getDocument(url).promise.then(pdf => { // 获取第一页 pdf.getPage(1).then(page => { const canvas = document.getElementById('pdf-canvas') const context = canvas.getContext('2d') const viewport = page.getViewport({ scale: 1 }) canvas.width = viewport.width canvas.height = viewport.height // 渲染页面到canvas上 page.render({ canvasContext: context, viewport: viewport }) }) }) } ``` 在上面的代码,你需要将`/path/to/your/pdf/document.pdf`替换为你实际的PDF文档路径。然后,将一个canvas元素添加到你的模板,并为其指定一个id(例如`pdf-canvas`)。 ```html <template> <div> <canvas id="pdf-canvas"></canvas> </div> </template> ``` 4. 最后,在适当的时候调用`loadPDF`方法来加载显示PDF文档。你可以在Vue组件的生命周期钩子或用户交互事件调用它。 希望这些步骤能帮助你在Vue项目成功使用pdfjs-dist库来加载显示PDF文档。如果有任何问题,请随时提问!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值