Dzwebs.Net

撰写电脑技术杂文十余年

html5接收后台的base64显示在canvas画布上

Admin | 2022-6-23 15:17:50 | 被阅次数 | 4187

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

  html5接收后台的base64显示在canvas画布上,请使用如下的代码即可实现。

  实现方法:

  ①页面元素

  在页面中有一个DIV,ID为“显示最终图片”;

  ②显示的canvas是动态创建的

  功能代码如下:

  $("#显示最终图片").empty();
  var imgbase64 ="data:image/jpg;base64,"+data['结果'];
  let img = new Image();
  img.src = imgbase64;
  let myCanvas = document.createElement("canvas");
  let ctx = myCanvas.getContext("2d");
  img.onload = () => {
    myCanvas.width = img.width;
    myCanvas.height = img.height;
    ctx.drawImage(img, 0, 0,);
    $('#显示最终图片').append(myCanvas);
    $('#显示最终图片').append("<p></p>在上图中点击鼠标右键,选择'图片另存为…',即可保存图片");
    };

  上述代码中,接收的data['结果']就是base64码,注意,不包含头。


该杂文来自: 网页制作杂文

上一篇:h5 input输入框的内容改变触发事件的示例

下一篇:jquery读取服务器json文件,中文显示乱码

网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231 访问统计