How to flip images horizontally with HTML5

前端 未结 7 1176
暖寄归人
暖寄归人 2020-11-28 07:14

In IE, I can use:


to implement an image flip horizontally.

7条回答
  •  一生所求
    2020-11-28 07:57

    One option is to horizontally flip the pixels of images stored in ImageData objects directly, e.g.

    function flip_image (canvas) {
       	var context   = canvas.getContext ('2d') ;
       	var imageData = context.getImageData (0, 0, canvas.width, canvas.height) ;
       	var imageFlip = new ImageData (canvas.width, canvas.height) ;
       	var Npel      = imageData.data.length / 4 ;
    
       	for ( var kPel = 0 ; kPel < Npel ; kPel++ ) {
       	   	var kFlip      = flip_index (kPel, canvas.width, canvas.height) ;
       	   	var offset     = 4 * kPel ;
       	   	var offsetFlip = 4 * kFlip ;
       	   	imageFlip.data[offsetFlip + 0] = imageData.data[offset + 0] ;
       	   	imageFlip.data[offsetFlip + 1] = imageData.data[offset + 1] ;
       	   	imageFlip.data[offsetFlip + 2] = imageData.data[offset + 2] ;
       	   	imageFlip.data[offsetFlip + 3] = imageData.data[offset + 3] ;
       	}
    
       	var canvasFlip = document.createElement('canvas') ;
       	canvasFlip.setAttribute('width', width) ;
       	canvasFlip.setAttribute('height', height) ;
    
       	canvasFlip.getContext('2d').putImageData(imageFlip, 0, 0) ;
       	return canvasFlip ;
    }
    
    function flip_index (kPel, width, height) {
       	var i     = Math.floor (kPel / width) ;
       	var j     = kPel % width ;
       	var jFlip = width - j - 1 ;
       	var kFlip = i * width + jFlip ;
       	return kFlip ;
    }

提交回复
热议问题