Question

我结合了两个JQuery库Jcrop / Iviewer，能够同时缩放和剪辑图像。代码正在使用chrome但在Mozilla中仍然存在一些问题。我相信drawImage会导致错误IndexSizeError：索引或大小为负或大于允许的数量：

$('#crop').Jcrop({
            onChange: imgSelect,
            onSelect: imgSelect
        });

function imgSelect(selection) {
            var ctx = canvas.getContext('2d');
            var xZoom = $("#image_input").iviewer('info', 'coords', 'true').x;
            var yZoom = $("#image_input").iviewer('info', 'coords', 'true').y;
            var zoom = $("#image_input").iviewer('info', 'zoom', 'true');

                var w_orig = (selection.w * 100) / zoom;
                var h_orig = (selection.h * 100) / zoom;
                canvas.width = w_orig;
                canvas.height = h_orig;

                ctx.drawImage(
                    image,
                    ((selection.x - $("#image_input").iviewer('info', 'coords', 'false').x) * 100) / zoom,
                    ((selection.y - $("#image_input").iviewer('info', 'coords', 'false').y) * 100) / zoom,
                    w_orig,
                    h_orig,
                    0,
                    0,
                    w_orig,
                    h_orig
                );
        }

<div id="image_input" class="viewer"></div> <!--layer 1 zoom-->
<div id="crop"></div><!-- layer 2 crop-->

Answer 1

出现此问题的原因是，当您第一次点击裁剪区域（或图像）时，w_orig和h_orig的值将为0，因为没有选择实际区域。

我绕过此问题所做的是添加if条件来检查这些值，当你将它们设为0时，你手动更改值。它不会影响正常裁剪，因为下次更改事件被触发时，您不会让w_orig和h_orig为零，因此条件不会为真。

function imgSelect(selection) {
            var ctx = canvas.getContext('2d');
            var xZoom = $("#image_input").iviewer('info', 'coords', 'true').x;
            var yZoom = $("#image_input").iviewer('info', 'coords', 'true').y;
            var zoom = $("#image_input").iviewer('info', 'zoom', 'true');

                var w_orig = (selection.w * 100) / zoom;
                var h_orig = (selection.h * 100) / zoom;
                canvas.width = w_orig;
                canvas.height = h_orig;

                if (c.w === 0 && c.h === 0)
                {
                   //set any arbitrary values
                   c.w = 300;
                   c.h = 300;
                }

                ctx.drawImage(
                    image,
                    ((selection.x - $("#image_input").iviewer('info', 'coords', 'false').x) * 100) / zoom,
                    ((selection.y - $("#image_input").iviewer('info', 'coords', 'false').y) * 100) / zoom,
                    w_orig,
                    h_orig,
                    0,
                    0,
                    w_orig,
                    h_orig
                );
        }

Canvas：DrawImage在chrome中完美运行但在Mozilla中没有[IndexSizeError：索引或大小为负或大于允许的数量]

1 个答案: