H5中利用canvas截取裁剪图片并保存为base64

最新推荐文章于 2024-04-12 17:06:18 发布

Icebreaking丶

最新推荐文章于 2024-04-12 17:06:18 发布

阅读量1.3k

点赞数 1

分类专栏： Web前端 HTML 文章标签： html5 canvas javascript

本文链接：https://blog.csdn.net/qq_41526316/article/details/119353508

版权

Web前端同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <canvas width="720px" height="1080px" id="canvas"></canvas>
  <img src="" id="img">
</body>
<script type="text/javascript">
//对canvas画布进行裁剪，并将裁剪区的图像转成base64编码格式进行返回
window.onload = function() {
  var c = document.getElementById("canvas");
  //canvas画笔对象
  var ctx = c.getContext("2d");
  //首先先向canvas画布中绘制一张图片
  var img = new Image();
  img.src = "demo.png";
  img.onload = function () {
    //绘制图像
    ctx.drawImage(this, 0, 0);

    /**
     * 拷贝画布
     * @param 拷贝原canvas起始点x坐标点
     * @param 拷贝原canvas起始点y坐标点
     * @param 拷贝图片的宽度
     * @param 拷贝图片的高度
     * @type {ImageData}
     */
    let w = 300;
    let h = 300;
    var dataImg = ctx.getImageData(100, 100, w, h);
    //声明一个新的画布,用来存放copy下的图片
    var _canvas = document.createElement("canvas");
    var _cxt = _canvas.getContext("2d");
    _canvas.width = w
    _canvas.height = h
    /**
     * @param copy的图片
     * @param 存放新位置的x坐标点
     * @param 存放新位置的y坐标点
     */
    _cxt.putImageData(dataImg,0,0)
    let base64 = _canvas.toDataURL('image/jpeg')
    console.log(base64);
  }
}
</script>
</html>

在本地环境会出现跨域情况正式环境则会正常

在这里插入图片描述

Icebreaking丶

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
H5中利用canvas截取裁剪图片并保存为base64

<!DOCTYPE html><html><head> <title></title></head><body> <canvas width="720px" height="1080px" id="canvas"></canvas> <img src="" id="img"></body><script type="text/javascript"
复制链接

扫一扫