0

切り抜いた画像をキャンバスからサーバーにアップロードしようとしています。ファイルを選択した後、それをトリミングしたいのですが、送信ボタンをクリックすると、フォームを使用して投稿を実行します。バックエンドを従来のフォーム送信から切り替える必要がないことを望んでいました (既に配置され、機能しているため)。

画像操作から fabricjs を使用しています。他のライブラリには anuglarjs と restangular が含まれていますが、これは fabricjs/html 5 の質問だと思います。

バックエンドの Python / Django

画像をトリミングするためにファブリックの拡張機能を使用しています（以下に含まれています）。それが機能していると想定しています。画像データの URL をフォームに戻す方法がわかりません。どうも

形：

<form name="uploadForm" method="post" enctype="multipart/form-data" action="/main/update">{% csrf_token %}
    <div class="control-group">
        <label class="control-label" for="file">Image File</label>
        <div class="controls">
            <input type="file" name="file" onchange="newImage(this)" />
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="caption">Image Caption</label>
        <div class="controls">
            <input type="text" name="caption" />
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <input type="submit" value="Upload" />
        </div>
    </div>
    <div>
        <!-- 770 x 300 -->
        <canvas id="myCanvas" width="800" height="400" style="border:1px solid #000000;"></canvas>
    </div>
</form>

脚本

var newImage = function (inp) {
    file = inp.files[0];
    fr = new FileReader();
    fr.onload = createImage;
    fr.readAsDataURL(file);

    function createImage() {
        img = new Image();
        img.onload = imageLoaded;
        img.src = fr.result;

    }

    function imageLoaded() {
        var fabImg = new fabric.Image(img)
        console.log(fabImg)

        var canvas = new fabric.Canvas('myCanvas')

        fabImg.scale(1.0).set({
            left: canvas.width / 2,
            top: canvas.height / 2
        });

        var rect = new fabric.Rect({
            fill: 'lightgray',
            left: canvas.width / 2,
            top: canvas.height / 2,
            width: 770,
            height: 300,
            stroke: 'darkgray',
            strokeDashArray: [5, 5],
            selectable: false
        });

        canvas.add(rect)
        canvas.add(fabImg)
        canvas.setActiveObject(fabImg)

        var data = canvas.toDataURLWithCropping('png', {
            y: rect.top,
            x: rect.left,
            width: 770,
            height: 300,
            quality: 1
        })

        console.log(data)
    }
}

fabric.Canvas.prototype.toDataURLWithCropping = function (format, cropping, quality) {
    var canvasEl = this.upperCanvasEl || this.lowerCanvasEl,
        ctx = this.contextTop || this.contextContainer,
        tempCanvasEl = fabric.document.createElement('canvas'),
        tempCtx, imageData;

    if (!tempCanvasEl.getContext && typeof G_vmlCanvasManager !== 'undefined') {
        G_vmlCanvasManager.initElement(tempCanvasEl);
    }

    this.renderAll(true);

    tempCanvasEl.width = cropping.width;
    tempCanvasEl.height = cropping.height;

    imageData = ctx.getImageData(cropping.x, cropping.y, cropping.width, cropping.height);

    tempCtx = tempCanvasEl.getContext('2d');
    tempCtx.putImageData(imageData, 0, 0);

    var data = (fabric.StaticCanvas.supports('toDataURLWithQuality')) ? tempCanvasEl.toDataURL('image/' + format, quality) : tempCanvasEl.toDataURL('image/' + format);

    this.contextTop && this.clearContext(this.contextTop);
    this.renderAll();
    return data;
}
4

1 に答える 1

0

私が知る限り、それは不可能です。元の投稿へのコメントでスコットが言及したものと同様のソリューションを使用することにしました。ご検討いただきありがとうございます。

于 2013-09-01T14:05:54.263 に答える