用Vue框架将base64格式的图片画到canvas上

 

vue使用时必须在mounted里面、或者点击触发,因为在这个生命周期后才能获取dom元素

vue代码

<template>
    <div><canvas id="myCanvas" width="800" height="800"></canvas></div>
</template>

<script>
//导入 axios 用于获取接口数据用的
import axios from "axios";
export default {
  data() {
    return {
    };
  },
  methods: {
   
  },
  created() {
    axios({
        //写接口路径用
      url: "",
        //请求方式
      method: "",
        //用于传参
      params: {
        
      },
    })
      .then((res) => {
        //接口拿来的数据用变量 imgbase64=接口数据
        var imgbase64 = res.data;
        let img = new Image();
        img.src = imgbase64;
        let myCanvas = document.getElementById("myCanvas").getContext("2d");
        img.onload = () => {
          myCanvas.drawImage(img, 90, 250, 180, 240);
          myCanvas.font = "25px Arial";
          myCanvas.fillText("邀请码", 140, 190, 100, 0);
        };
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
以下是使用Jinja2模板建立前端系统,通过浏览器将测试图片图片的像素数据提交到后端,显示后端返回的结果的代码实现: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Handwritten Digit Recognition</title> </head> <body> <div> <canvas id="canvas" width="280" height="280" style="border:1px solid #000000;"></canvas> </div> <div> <button onclick="clearCanvas()">Clear</button> <button onclick="predictDigit()">Predict</button> </div> <div> <img id="result" src="" alt=""> </div> <script> var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var isDrawing = false; var lastX; var lastY; function startDrawing(e) { isDrawing = true; [lastX, lastY] = [e.offsetX, e.offsetY]; } function draw(e) { if (!isDrawing) return; ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); [lastX, lastY] = [e.offsetX, e.offsetY]; } function stopDrawing() { isDrawing = false; } function clearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); } function predictDigit() { var dataURL = canvas.toDataURL('image/png'); var xhr = new XMLHttpRequest(); xhr.open('POST', '/predict'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = function() { if (xhr.status === 200) { var result = JSON.parse(xhr.responseText)['result']; document.getElementById('result').src = 'data:image/png;base64,' + result; } }; xhr.send(JSON.stringify({'image': dataURL})); } canvas.addEventListener('mousedown', startDrawing); canvas.addEventListener('mousemove', draw); canvas.addEventListener('mouseup', stopDrawing); canvas.addEventListener('mouseout', stopDrawing); </script> </body> </html> ``` 在上述代码中,我们使用canvas和js实现了手写数字输入和显示功能。用户可以在canvas上手写数字,然后单击“Predict”按钮将手写数字图片提交给后端进行预测。预测结果将在页面上显示出来。在提交图片数据时,我们使用XMLHttpRequest对象将图片数据以JSON格式传递给后端,同时设置了Content-Type头部。当接收到后端返回的预测结果后,我们将其显示在页面上。请注意,此代码仅适用于展示前端页面如何与后端交互,需要在后端编写相应的API接口以接收和处理图片数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小马大咖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值