Question

我们为用户提供了一个从本地计算机上载图像的选项。...

onclick 该图像，我想像this fiddle中那样旋转图像，因此我尝试了以下代码，但是image 不旋转 onclick上传的图像。 ...

下面是代码段：

$(document).ready(function() {

    //  base64string image format- to work in codepen, fiddle
	
    var maskedImageUrla = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAAEWCAYAAABiyvLjAAAACXBIWXMAAC4jAAAuIwF4pT92AAAF+mlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTAxLTE5VDE4OjExOjMwKzA1OjMwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTAxLTE5VDE4OjExOjMwKzA1OjMwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0wMS0xOVQxODoxMTozMCswNTozMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpjNzlhOWNlMi1jZmM4LTI3NDQtOWQ5YS0wN2RkNGI0Y2YzNGQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDozYjhkZGNiMS04MjQ4LTM4NDAtYmY1OC1jN2VhMTYyOTYyMGUiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5NGVkMjU4ZC0zMzhiLTljNDMtOTYyOS1jMmM1MmRiMzE2NGUiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjk0ZWQyNThkLTMzOGItOWM0My05NjI5LWMyYzUyZGIzMTY0ZSIgc3RFdnQ6d2hlbj0iMjAxOS0wMS0xOVQxODoxMTozMCswNTozMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpjNzlhOWNlMi1jZmM4LTI3NDQtOWQ5YS0wN2RkNGI0Y2YzNGQiIHN0RXZ0OndoZW49IjIwMTktMDEtMTlUMTg6MTE6MzArMDU6MzAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz62EfeeAAATzUlEQVR4nO3df5BdZX3H8Xfu7OxsQ4zbEGOMMYQQQ4ghhB9BCIj8DKAQiTqAETH8qIkMSgMtGIMylMFIMThoGbCCoYBSobVKpYIi5WdApR2IURkGEWkaI41pTNNM2El3+8d3L7nc3Lv33HvPOd/nOefzmtnR3b33nC9J9rPf85znPM+ooaEhREZwEXDj8P//E2CXYy2SoYp3ARKsCcCDwE1Az/DHNNeKJFMKA2nkGOBXwIK6r89wqEVyojCQep8BHgXGNfjerJxr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";

    // maskedImage 
    var mask1 = $(".container").mask({
        maskImageUrl: maskedImageUrla,
        onMaskImageCreate: function(img) {
            // add your style to the img example below
            img.css({
                "left": 105,
                "top": 5,
				"id": 'self'
            })
        }
    });

    fileupa1.onchange = function() {
        mask1.loadImage(URL.createObjectURL(fileupa1.files[0]));
    };
}); // end of document ready

// jq code for mask

(function($) {
    var JQmasks = [];
    $.fn.mask = function(options) {
        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            maskImageUrl: undefined,
            imageUrl: undefined,
            scale: 1,
            id: new Date().getUTCMilliseconds().toString() + JQmasks.length,
            x: 0, // image start position
            y: 0, // image start position
            onImageCreate: function(img) {},
            onMaskImageCreate: function(div) {}
        }, options);

        var container = {};

        let prevX = 0,
            prevY = 0,
            draggable = false,
            img,
            canvas,
            context,
            image,
            initImage = false,
            startX = settings.x,
            startY = settings.y,
            div,
            obj = $(this);        
                    
        container.updateStyle = function() {

            context.clearRect(0, 0, canvas.width, canvas.height);
            context.globalCompositeOperation = "source-over";

            if (initImage || !image) {
                image = new Image();
                image.setAttribute('crossOrigin', 'anonymous');
                image.src = settings.maskImageUrl;
                image.onload = function() {
                    if (settings.onImageCreate)
                        settings.onImageCreate(image);

                    canvas.width = image.width * settings.scale;
                    canvas.height = image.height * settings.scale;
                    context.drawImage(image, 0, 0, image.width, image.height);
                    div.css({
                        "width": image.width,
                        "height": image.height
                    });
                };
            } else {
                context.drawImage(image, 0, 0, image.width, image.height);
            }

            if (initImage || !img) {
                img = new Image();
                img.src = settings.imageUrl || "";
                img.setAttribute('crossOrigin', 'anonymous');
                img.onload = function() {
                    settings.x = settings.x === 0 && initImage === true ? (canvas.width - (img.width * settings.scale)) / 2 : settings.x;
                    settings.y = settings.y === 0 && initImage === true ? (canvas.height - (img.height * settings.scale)) / 2 : settings.y;
                    context.globalCompositeOperation = 'source-atop';
                    context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale);
                    initImage = false;
                };
            } else {
                context.globalCompositeOperation = 'source-atop';
                context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale);
            }
        };

        // change the draggable image
        container.loadImage = function(imageUrl) {
            if (img)
                img.remove();
            // reset the code.
            settings.y = startY;
            settings.x = startX;
            prevX = prevY = 0;
            settings.imageUrl = imageUrl;
            initImage = true;

            container.updateStyle();
        };

        container.createCanvas = function() {
            if (canvas)
                canvas.remove();
            canvas = document.createElement("canvas");
            context = canvas.getContext('2d');
            canvas.setAttribute("draggable", "true");
            canvas.setAttribute("id", settings.id);
            div.append(canvas);
            div.find("canvas").hover(container.selected);
            div.find("canvas").on('touchstart mousedown', container.selected);
            div.find("canvas").on('touchend mouseup', function(event) {
                if (event.handled === true) return;
                event.handled = true;
                JQmasks.forEach(function(item) {
                    
                });
            });
            div.find("canvas").bind("dragover", container.onDragOver);
        };

        // change the masked Image
        container.loadMaskImage = function(imageUrl, from) {
            if (div)
                div.remove();

            settings.maskImageUrl = imageUrl;
            div = $("<div/>", {
                "class": "masked-img"
            });
            container.createCanvas();
            obj.append(div);
            if (settings.onMaskImageCreate)
                settings.onMaskImageCreate(div);
            container.loadImage(settings.imageUrl);
        };
        container.loadMaskImage(settings.maskImageUrl);
        JQmasks.push({
            item: container,
            id: settings.id
        });

        return container;
    };

}(jQuery));

// Rotate : 

let imageToSpin = document.getElementById('self');

function spinImage() {
	imageToSpin.classList.toggle('rotated')
}

imageToSpin.onclick = spinImage;

.container {
    border: 1px solid #DDDDDD;
    display: flex;
    background: red;
}

.container canvas {
    display: block;
}

.masked-img {
    overflow: hidden;
    margin-left: 10px;
    position: relative;
}

.rotated {
  transform: rotate(90deg)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

image 1 
<input id="fileupa1"  type="file" >

<div class="container">
</div>

这里是JSFiddle和CodePen

如果您需要更多信息，请告诉我。...

Answer 1

添加了旋转选项 https://jsfiddle.net/uf4h6x08/

function spinImage() {
r+= 10;
    mask1.rotate(r) ;
}

在画布内旋转蒙版图像

1 个答案: