Recadrage d'image à l'aide de JavaScript canvas_jquery

Canvas est une balise qui nous permet de dessiner à l'aide de scripts. Elle fournit une série complète de propriétés et de méthodes. Nous pouvons l’utiliser pour réaliser du dessin graphique, du traitement d’images et même de simples animations et productions de jeux.

La balise canvas n'a que deux attributs : la largeur et la hauteur, qui sont utilisés pour définir la largeur et la hauteur du canevas. Si elles ne sont pas définies via les attributs de balise ou les scripts, la valeur par défaut est 300*150 ;

D'accord, l'introduction à Canvas est ici en premier. Jetons un coup d'œil au code pour recadrer des images à l'aide de javascript combiné avec Canvas :

Copier le code Le code est le suivant :

var selectObj = null;
function ImageCrop (canvasId, imageSource, x, y, width, height) {
    var toile = $("#" canvasId);
    if (canvas.length == 0 && imageSource) {
        revenir ;
    >
    fonction canvasMouseDown(e) {
        StopSelect(e);
        canvas.css("curseur", "par défaut");
    >
    fonction canvasMouseMove(e) {
        var toileOffset = toile.offset();
        var pageX = e.pageX || event.targetTouches[0].pageX;
        var pageY = e.pageY || event.targetTouches[0].pageY;
        iMouseX = Math.floor(pageX - canvasOffset.left);
        iMouseY = Math.floor(pageY - canvasOffset.top);
        canvas.css("curseur", "par défaut");
        if (selectObj.bDragAll) {
            canvas.css("curseur", "déplacer");
            canvas.data("glisser", true);
            var cx = iMouseX - selectObj.px;
            cx = cx ≪ 0 ? 0 : cx;
            mx = ctx.canvas.width - selectObj.w;
            cx = cx> MX ? mx : cx;
            selectObj.x = cx;
            var cy = iMouseY - selectObj.py;
            cy = cy &Lt ; 0 ? 0 : cy;
            mon = ctx.canvas.height - selectObj.h;
            cy = cy> mon ? mon : cy;
            selectObj.y = cy;
        >
        pour (var je = 0; je < 4; je ) {
            selectObj.bHow[i] = false;
            selectObj.iCSize[i] = selectObj.csize;
        >
        // survolant les cubes de redimensionnement
        if (iMouseX > selectObj.x - selectObj.csizeh && iMouseX < selectObj.x selectObj.csizeh &&
            iMouseY > selectObj.y - selectObj.csizeh && iMouseY < selectObj.y selectObj.csizeh) {
            canvas.css("curseur", "pointeur");
            selectObj.bHow[0] = true;
            selectObj.iCSize[0] = selectObj.csizeh;
        >
        if (iMouseX > selectObj.x selectObj.w - selectObj.csizeh && iMouseX < selectObj.x selectObj.w selectObj.csizeh &&
            iMouseY > selectObj.y - selectObj.csizeh && iMouseY < selectObj.y selectObj.csizeh) {
            canvas.css("curseur", "pointeur");
            selectObj.bHow[1] = true;
            selectObj.iCSize[1] = selectObj.csizeh;
        >
        if (iMouseX > selectObj.x selectObj.w - selectObj.csizeh && iMouseX < selectObj.x selectObj.w selectObj.csizeh &&
            iMouseY > selectObj.y selectObj.h - selectObj.csizeh && iMouseY < selectObj.y selectObj.h selectObj.csizeh) {
            canvas.css("curseur", "pointeur");
            selectObj.bHow[2] = true;
            selectObj.iCSize[2] = selectObj.csizeh;
        >
        if (iMouseX > selectObj.x - selectObj.csizeh && iMouseX < selectObj.x selectObj.csizeh &&
            iMouseY > selectObj.y selectObj.h - selectObj.csizeh && iMouseY < selectObj.y selectObj.h selectObj.csizeh) {
            canvas.css("curseur", "pointeur");
            selectObj.bHow[3] = true;
            selectObj.iCSize[3] = selectObj.csizeh;
        >
        if (iMouseX > selectObj.x && iMouseX < selectObj.x selectObj.w && iMouseY > selectObj.y && iMouseY < selectObj.y selectObj.h) {
            canvas.css("curseur", "déplacer");
        >
        // en cas de glisser des cubes de redimensionnement
        var iFW, iFH, iFX, iFY, mx, mon ;
        if (selectObj.bDrag[0]) {
            iFX = iMouseX - selectObj.px;
            iFY = iMouseY - selectObj.py;
            iFW = selectObj.w selectObj.x - iFX;
            iFH = selectObj.h selectObj.y - iFY;
            canvas.data("glisser", true);
        >
        if (selectObj.bDrag[1]) {
            iFX = selectObj.x;
            iFY = iMouseY - selectObj.py;
            iFW = iMouseX - selectObj.px - iFX;
            iFH = selectObj.h selectObj.y - iFY;
            canvas.data("glisser", true);
        >
        if (selectObj.bDrag[2]) {
            iFX = selectObj.x;
            iFY = selectObj.y;
            iFW = iMouseX - selectObj.px - iFX;
            iFH = iMouseY - selectObj.py - iFY;
            canvas.data("glisser", true);
        >
        if (selectObj.bDrag[3]) {
            iFX = iMouseX - selectObj.px;
            iFY = selectObj.y;
            iFW = selectObj.w selectObj.x - iFX;
            iFH = iMouseY - selectObj.py - iFY;
            canvas.data("glisser", true);
        >
        if (iFW > selectObj.csizeh * 2 && iFH > selectObj.csizeh * 2) {
            selectObj.w = iFW;
            selectObj.h = iFH;
            selectObj.x = iFX;
            selectObj.y = iFY;
        >
        drawScene();
    >
    fonction canvasMouseOut() {
        $(canvas).trigger("mouseup");
    >
    fonction canvasMouseUp() {
        selectObj.bDragAll = false;
        pour (var je = 0; je < 4; je ) {
            selectObj.bDrag[i] = false;
        >
        canvas.css("curseur", "par défaut");
        canvas.data("select", {
            x : selectObj.x,
            y : selectObj.y,
            w : selectObj.w,
            h : selectObj.h
        });
        selectObj.px = 0;
        selectObj.py = 0;
    >
    fonction Sélection(x, y, w, h) {
        ceci.x = x; // positions initiales
        ceci.y = y;
        ceci.w = w; // et taille
        ceci.h = h;
        ceci.px = x; // variables supplémentaires pour faire glisser les calculs
        this.py = y;
        this.csize = 4 ; // redimensionne la taille des cubes
        this.csizeh = 6 ; // redimensionne la taille des cubes (au survol)
        this.bHow = [faux, faux, faux, faux] ; // survolez les statuts
        this.iCSize = [this.csize, this.csize, this.csize, this.csize]; // redimensionne la taille des cubes
        this.bDrag = [faux, faux, faux, faux] ; // faites glisser les statuts
        this.bDragAll = faux ; // faites glisser toute la sélection
    >
    Selection.prototype.draw = fonction () {
        ctx.StrokeStyle = '#666';
        ctx.lineWidth = 2;
        ctx.StrokeRect(this.x, this.y, this.w, this.h);
        // dessine une partie de l'image originale
        if (this.w > 0 && this.h > 0) {
            ctx.drawImage(image, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h);
        >
        // dessine des cubes redimensionnables
        ctx.fillStyle = '#999';
        ctx.fillRect(this.x - this.iCSize[0], this.y - this.iCSize[0], this.iCSize[0] * 2, this.iCSize[0] * 2);
        ctx.fillRect(this.x this.w - this.iCSize[1], this.y - this.iCSize[1], this.iCSize[1] * 2, this.iCSize[1] * 2);
        ctx.fillRect(this.x this.w - this.iCSize[2], this.y this.h - this.iCSize[2], this.iCSize[2] * 2, this.iCSize[2] * 2) ;
        ctx.fillRect(this.x - this.iCSize[3], this.y this.h - this.iCSize[3], this.iCSize[3] * 2, this.iCSize[3] * 2);
    };
    var drawScene = fonction () {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // effacer la toile
        // dessine l'image source
        ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);
        // et le rend plus sombre
        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        // dessine la sélection
        selectObj.draw();
        toile.mousedown(canvasMouseDown);
        canvas.on("touchstart", canvasMouseDown);
    };
    var createSelection = fonction (x, y, largeur, hauteur) {
        var content = $("#imagePreview");
        x = x || Math.ceil((content.width() - width) / 2);
        y = y || Math.ceil((content.height() - hauteur) / 2);
        return new Selection(x, y, width, height);
    };
    var ctx = toile[0].getContext("2d");
    var iMouseX = 1;
    var iMouseY = 1;
    var image = nouvelle Image();
    image.onload = fonction () {
        selectObj = createSelection(x, y, width, height);
        canvas.data("select", {
            x : selectObj.x,
            y : selectObj.y,
            w : selectObj.w,
            h : selectObj.h
        });
        drawScene();
    };
    image.src = imageSource;
    canvas.mousemove(canvasMouseMove);
    canvas.on("touchmove", canvasMouseMove);
    var StopSelect = fonction (e) {
        var canvasOffset = $(canvas).offset();
        var pageX = e.pageX || event.targetTouches[0].pageX;
        var pageY = e.pageY || event.targetTouches[0].pageY;
        iMouseX = Math.floor(pageX - canvasOffset.left);
        iMouseY = Math.floor(pageY - canvasOffset.top);
        selectObj.px = iMouseX - selectObj.x;
        selectObj.py = iMouseY - selectObj.y;
        if (selectObj.bHow[0]) {
            selectObj.px = iMouseX - selectObj.x;
            selectObj.py = iMouseY - selectObj.y;
        >
        if (selectObj.bHow[1]) {
            selectObj.px = iMouseX - selectObj.x - selectObj.w;
            selectObj.py = iMouseY - selectObj.y;
        >
        if (selectObj.bHow[2]) {
            selectObj.px = iMouseX - selectObj.x - selectObj.w;
            selectObj.py = iMouseY - selectObj.y - selectObj.h;
        >
        if (selectObj.bHow[3]) {
            selectObj.px = iMouseX - selectObj.x;
            selectObj.py = iMouseY - selectObj.y - selectObj.h;
        >
        if (iMouseX > selectObj.x selectObj.csizeh &&
            iMouseX < selectObj.x selectObj.w - selectObj.csizeh &&
            iMouseY > selectObj.y selectObj.csizeh &&
            iMouseY < selectObj.y selectObj.h - selectObj.csizeh) {
            selectObj.bDragAll = true;
        >
        pour (var je = 0; je < 4; je ) {
            if (selectObj.bHow[i]) {
                selectObj.bDrag[i] = true;
            >
        >
    };
    toile.mouseout(canvasMouseOut);
    toile.mouseup(canvasMouseUp);
    canvas.on("touchend", canvasMouseUp);
    this.getImageData = fonction (previewID) {
        var tmpCanvas = $("")[0];
        var tmpCtx = tmpCanvas.getContext("2d");
        if (tmpCanvas && selectObj) {
            tmpCanvas.width = selectObj.w;
            tmpCanvas.height = selectObj.h;
            tmpCtx.drawImage(image, selectObj.x, selectObj.y, selectObj.w, selectObj.h, 0, 0, selectObj.w, selectObj.h);
            if (document.getElementById(previewID)) {
                document.getElementById(previewID).src = tmpCanvas.toDataURL();
                document.getElementById(previewID).style.border = "1px solid #ccc";
            >
            return tmpCanvas.toDataURL();
        >
    };
>
fonction autoResizeImage (maxWidth, maxHeight, objImg) {
    var img = nouvelle image();
    img.src = objImg.src;
    var hRatio;
    var wRatio;
    rapport var = 1;
    var w = objImg.width;
    var h = objImg.hauteur;
    wRatio = maxWidth / w;
    hRatio = hauteurmax / h;
    if (w < maxWidth && h < maxHeight) {
        revenir ;
    >
    if (maxWidth == 0 && maxHeight == 0) {
        rapport = 1;
    } sinon if (maxWidth == 0) {
        si (hRatio < 1) {
            ratio = hRatio;
        >
    } sinon if (maxHeight == 0) {
        si (wRatio < 1) {
            rapport = wRatio;
        >
    } sinon si (wRatio < 1 || hRatio < 1) {
        ratio = (wRatio <= hRatio ? wRatio : hRatio);
    } autre {
        ratio = (wRatio <= hRatio ? wRatio : hRatio) - Math.floor(wRatio <= hRatio ? wRatio : hRatio);
    >
    si (rapport < 1) {
        if (rapport < 0,5 && w < maxWidth && h < maxHeight) {
            rapport = 1 - rapport;
        >
        w = w * rapport ;
        h = h * rapport ;
    >
    objImg.hauteur = h;
    objImg.width = w;
>

小伙伴们拿去试试吧，希望大家能够喜欢，有疑问就给我留言吧。