2018.1项目小结

2018.1项目小结

1.页面中出现放大镜效果

• 此问题出现在iOS系统，长按出现放大镜
• 出现的原因是有input输入框，并且字体较小（用react等构建的项目，切换状态，不是路由显示其他页面时候，在其他页面长按也会出现放大镜），解决办法是字体大于16px，rem单位的16px转化后可能无效

2.长按页面出现复制

-webkit-user-select: none;    禁止长按复制，粘贴

3.输入框input文字居中，并且有文字时候光标居中

• 在css中如果我们定义了input高度在输入时会发现光标位置靠上了不在居中了，在Chrome浏览器中，当设置了line-height时，input无文字，光标高度与line-height一致；input有文字，光标高度从input顶部到文字底部。当没有设置line-height时，则是与font-size一致。
• 解决方案：让input的高度等于里面文字的高度，然后用padding把框撑起来，这样光标的高度和位置就固定了。

4.canvas绘图转换成图片坑

• Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

  
var img2 = new Image,
canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d");
img2.src = src;
img2.onload = function() {
canvas.width = img2.width;
canvas.height = img2.height;
ctx.drawImage( img2, 0, 0 );
console.log(canvas.toDataURL("image/png"));
}


  报错的原因是图片跨域了，解决办法是加上

  var img2 = new Image,
  canvas = document.createElement("canvas"),
  ctx = canvas.getContext("2d");
  img2.src = src;
  img2.crossOrigin = "Anonymous";  // 加上这个可以跨域
  img2.onload = function() {
  canvas.width = img2.width;
  canvas.height = img2.height;
  ctx.drawImage( img2, 0, 0 );
  console.log(canvas.toDataURL("image/png"));
  }

  如果还没解决，那就是图片的服务器不允许，在服务器上相应头里：设置Access-Control-Allow-Origin为 * ,就可以允许跨域。

• 解决了转化成图片，但是在ios中长按不能保存图片，问题很严重，解决办法

  var img2 = new Image,
  canvas = document.createElement("canvas"),
  ctx = canvas.getContext("2d");
  img2.crossOrigin = "Anonymous";
  img2.onload = function() {
  canvas.width = img2.width;
  canvas.height = img2.height;
  ctx.drawImage( img2, 0, 0 );
  toPng()
  }
  img2.src = src;  // 把这个放到onload事件之后
  function toPng(){
    const img = document.createElement('img');
    img.id = 'appendImg';
    img.src = this.canvas.toDataURL('image/png');
    img.style.width = this.frame.width + 'px';
    img.onload = () => { 
  document.getElementById('result').removeChild(document.getElementById('canvas'));
      document.getElementById('result').appendChild(img);
      const newImage = document.getElementById('appendImg');
    };
  }

  ​

  ​