all articles

Galaxy Android devices enables image to be saved whatever you do

2016-10-06 @sunderls

galaxy android image longpress saved js

description, bug

Galaxy Devices are sometimes buggy. One thing is about preventing long press on images.

there are many ways we can think of, such as

  1. stop touch event by css
  2. stop touch event by js preventdefault
  3. use a mask overlay <div> to prevent tapping on image.

and so on..

But none of these works on Galaxy.

it seems the image can be longpressed and the menu will come out as long as the image is visible

solution

use <canvas> to replace <img>

code

var $canvas = $('<canvas ></canvas>');
var img = new Image();

$body.append($canvas);

img.onload = function(){
    $canvas[0].width = img.width;
    $canvas[0].height = img.height;
    $canvas[0].getContext('2d').drawImage(img, 0, 0, img.width, img.height);
}
img.src = src;

canvas will behave like image to some extent, it will keep the initial width-height ratio, so you don't need to care about the rotation device.

pay attention to style="width:100%;display:block", if you don't set the display:block, the canvas will have some mystery margin. as is explained here :http://browser.colla.me/show/canvas_cannot_have_exact_size_to_fullscreen