使用JCrop裁剪绘制到画布中的图像

Orkun单身

我是HTML5的新手,正在尝试使用JCrop裁剪图像。如果我想直接对其进行裁剪,没有问题,但是当将其绘制到画布中时,JCrop不起作用。

我认为可能是因为我正在创建一个图像变量,以便能够将其绘制到视口画布中并动态设置其ID。因此,jQuery无法访问该动态创建的图像。但是即使如此,我也不知道该怎么办。

这是我的完整HTML代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <title>acanimal - Crop image on the client side with JCrop and HTML5 canvas element</title>

        <script src="./js/jquery.min.js" type="text/javascript"></script>
        <script src="./js/jquery.Jcrop.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="./css/jquery.Jcrop.css" type="text/css" />

        <script type="text/javascript">

            $(window).load(function () {
                var canvas = document.getElementById('viewport'),
                context = canvas.getContext('2d');

                make_base();

                function make_base() {
                    var base_image = new Image();
                    base_image.id = 'target';
                    base_image.src = 'demo_files/sago.jpg';
                    base_image.onload = function () {
                        context.drawImage(base_image, 0, 0);
                    }
                }

            });

            jQuery(function ($) {

                $('#target').Jcrop({
                    onChange: updatePreview,
                    onSelect: updatePreview,
                    allowSelect: true,
                    allowMove: true,
                    allowResize: true,
                    aspectRatio: 0
                });

                function updatePreview(c) {
                    if (parseInt(c.w) > 0) {
                        // Show image preview
                        var imageObj = $("#target")[0];
                        var canvas = $("#preview")[0];
                        var context = canvas.getContext("2d");

                        if (imageObj != null && c.x != 0 && c.y != 0 && c.w != 0 && c.h != 0) {
                            context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
                        }
                    }
                };
            });

        </script>
    </head>
    <body>
        <canvas id="viewport" width=602; height=500;></canvas>
        <canvas id="preview" style="width:150px;height:150px;overflow:hidden;"></canvas>
    </body>
</html>  

我究竟做错了什么?

谢谢...

和气

您设置Jcrop不正确,请尝试一下。

function make_base() {
  var base_image = new Image();
  base_image.src = 'https://picsum.photos/id/870/700/467';
  base_image.onload = function() {
    context.drawImage(base_image, 0, 0);
  }
}

function updatePreview(c) {
  if (parseInt(c.w) > 0) {
    // Show image preview
    var imageObj = $("#viewport")[0];
    var canvas = $("#preview")[0];
    var context = canvas.getContext("2d");

    if (imageObj != null && c.x != 0 && c.y != 0 && c.w != 0 && c.h != 0) {
      context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
    }
  }
}

var canvas = document.getElementById('viewport'),
  context = canvas.getContext('2d');

make_base();

$('#viewport').Jcrop({
  onChange: updatePreview,
  onSelect: updatePreview,
  allowSelect: true,
  allowMove: true,
  allowResize: true,
  aspectRatio: 0
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/tapmodo/[email protected]/js/jquery.Jcrop.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/tapmodo/[email protected]/css/jquery.Jcrop.min.css" rel="stylesheet" />

<canvas id="viewport" width="602" height="500"></canvas>
<canvas id="preview" style="width:150px;height:150px;overflow:hidden;"></canvas>

在JSFiddle上查看

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用JCrop裁剪图像绘制到画布中

来自分类Dev

使用JCrop保存裁剪的图像

来自分类Dev

如何使用jcrop裁剪不同尺寸的图像

来自分类Dev

Extjs Jcrop-使用预览裁剪图像

来自分类Dev

图像对象裁剪并在画布中心绘制

来自分类Dev

图像对象裁剪并在画布中心绘制

来自分类Dev

裁剪画布中显示的图像

来自分类Dev

绘制到html画布中的png图像质量不佳

来自分类Dev

使用回调将图像绘制到画布的Javascript

来自分类Dev

如何从图像画布中裁剪颜色部分?

来自分类Dev

如何在画布中对角裁剪图像

来自分类Dev

使用画布旋转和裁剪图像

来自分类Dev

在画布中绘制方形图像

来自分类Dev

使用画布裁剪图像 - 结果是小图像

来自分类Dev

将Svg绘制到画布上,包括嵌入到svg中的图像

来自分类Dev

如何从保存的base64图像中裁剪未使用的画布空间?

来自分类Dev

画布-从原型中绘制图像

来自分类Dev

使用画布绘制真实尺寸的图像

来自分类Dev

使用img.crossOrigin =“ Anonymous”将图像绘制到画布上不起作用

来自分类Dev

为什么我必须使用 window.onload 将图像绘制到画布上

来自分类Dev

如何调整大小然后使用画布裁剪图像

来自分类Dev

使用JCROP和JQUERY通过基于jsp..url的图像源/动态图像无法裁剪图像

来自分类Dev

使用Libgdx从图像中裁剪图像

来自分类Dev

将两个图像的差异绘制到画布

来自分类Dev

用JavaScript加载并绘制平铺图像到画布

来自分类Dev

如何使用 angular 2 和 typescript 裁剪图像、调整裁剪框的大小并将其保存在另一个画布中

来自分类Dev

绘制到选定的画布

来自分类Dev

如何使用 JavaScript 在 html 画布中为特殊过滤器绘制图像

来自分类Dev

将图像绘制到画布上会为每个绘制的新图像返回InvalidStateError,然后成功

Related 相关文章

  1. 1

    使用JCrop裁剪图像绘制到画布中

  2. 2

    使用JCrop保存裁剪的图像

  3. 3

    如何使用jcrop裁剪不同尺寸的图像

  4. 4

    Extjs Jcrop-使用预览裁剪图像

  5. 5

    图像对象裁剪并在画布中心绘制

  6. 6

    图像对象裁剪并在画布中心绘制

  7. 7

    裁剪画布中显示的图像

  8. 8

    绘制到html画布中的png图像质量不佳

  9. 9

    使用回调将图像绘制到画布的Javascript

  10. 10

    如何从图像画布中裁剪颜色部分?

  11. 11

    如何在画布中对角裁剪图像

  12. 12

    使用画布旋转和裁剪图像

  13. 13

    在画布中绘制方形图像

  14. 14

    使用画布裁剪图像 - 结果是小图像

  15. 15

    将Svg绘制到画布上,包括嵌入到svg中的图像

  16. 16

    如何从保存的base64图像中裁剪未使用的画布空间?

  17. 17

    画布-从原型中绘制图像

  18. 18

    使用画布绘制真实尺寸的图像

  19. 19

    使用img.crossOrigin =“ Anonymous”将图像绘制到画布上不起作用

  20. 20

    为什么我必须使用 window.onload 将图像绘制到画布上

  21. 21

    如何调整大小然后使用画布裁剪图像

  22. 22

    使用JCROP和JQUERY通过基于jsp..url的图像源/动态图像无法裁剪图像

  23. 23

    使用Libgdx从图像中裁剪图像

  24. 24

    将两个图像的差异绘制到画布

  25. 25

    用JavaScript加载并绘制平铺图像到画布

  26. 26

    如何使用 angular 2 和 typescript 裁剪图像、调整裁剪框的大小并将其保存在另一个画布中

  27. 27

    绘制到选定的画布

  28. 28

    如何使用 JavaScript 在 html 画布中为特殊过滤器绘制图像

  29. 29

    将图像绘制到画布上会为每个绘制的新图像返回InvalidStateError,然后成功

热门标签

归档