Safari에서 toDataURL()을 사용하면 이미지가 거꾸로 될 수 있습니다! ?
개요
Safari에서 WebGL에서 toDataURL()을 사용하면 이미지가 거꾸로됩니다! ?
환경
Safari 10.0
PixiJS v4
샘플
index.html<body>
<h1>toDataURL() テスト</h1>
<div id="canvas-area01"></div>
<p><input type="button" name="button" value="toDataURL()実行" id="dataurl-button"></p>
<div id="image-area01"><img src="" width="250" height="250" alt="通常dataurl"></div>
<p><input type="button" name="button" value="逆さま回避" id="re-dataurl-button"></p>
<div id="canvas-area02"><canvas id="re-canvas" width="250" height="250"></canvas></div>
<div id="image-area02"><img src="" width="250" height="250" alt="複製画像のdataurl"></div>
</body>
"canvas-area01"→ pixi.js로 그리는 영역
"image-area01"→ 위에서 그린 것을 toDataURL()하는 영역
"canvas-area02"→ "canvas-area01"을 복제하여 drawImage하는 영역
"image-area02"→ "canvas-area02"를 toDataURL()하는 영역
script.jsfunction render(){
// create stage
var stage = new PIXI.Container(0xFFFFFF);
// canvas size
var width = 250;
var height = 250;
// create renderer
var renderer = new PIXI.WebGLRenderer(width, height, {backgroundColor: 0xFFFFFF, preserveDrawingBuffer: true});
// renderer's view add DOM
document.getElementById('canvas-area01').appendChild(renderer.view);
// render
PIXI.loader
.add('face', '../images/face.png')
.load(function (loader, resources) {
var face_img = new PIXI.Sprite(resources.face.texture);
stage.addChild(face_img);
renderer.render(stage);
});
}
function dataurl(){
$('#dataurl-button').on('click', function(){
var canvas_area01 = $('canvas')[0];
var imgData = canvas_area01.toDataURL();
$('#image-area01 img').attr('src', imgData);
});
}
function re_dataurl(){
$('#re-dataurl-button').on('click', function(){
var canvas_area01 = $('canvas')[0];
var canvas_area02 = document.getElementById('re-canvas');
if(canvas_area02.getContext){
var context = canvas_area02.getContext('2d');
context.drawImage(canvas_area01, 0, 0);
}
var sendImage = $('#re-canvas')[0];
var imgData = sendImage.toDataURL();
$('#image-area02 img').attr('src', imgData);
});
}
$(function(){
render();
dataurl();
re_dataurl();
});
render() → pixi.js로 그리는 함수
dataurl() → 위에서 그린 것을 toDataURL() 하는 함수
re_dataurl() → render()로 그린 이미지를 다른 캔버스에 drawImage한 다음 toDataURL()하는 함수
페이지에 표시
자신의 썸네일 이미지를 사용해 봅니다.
보통 DataURL()을 사용하여 그리면 거꾸로 되어 버렸습니다.
해결 방법으로 다른 canvas를 준비하고 거기에 drawImage하고 DataURL ()을 사용하면 정상적으로 표시되었습니다.
이번에는 pixi.js에서 일어났지만 Three.js라도 일어날지는 아직 시도하지 않았습니다.
Safari 만이 사건이 일어나는 것 같습니다.
Chrome이나 Firefox, IE 등은 괜찮을 것 같습니다.
Reference
이 문제에 관하여(Safari에서 toDataURL()을 사용하면 이미지가 거꾸로 될 수 있습니다! ?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/smanabee/items/1c75e0c5b5ca1acd0215
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Safari 10.0
PixiJS v4
샘플
index.html<body>
<h1>toDataURL() テスト</h1>
<div id="canvas-area01"></div>
<p><input type="button" name="button" value="toDataURL()実行" id="dataurl-button"></p>
<div id="image-area01"><img src="" width="250" height="250" alt="通常dataurl"></div>
<p><input type="button" name="button" value="逆さま回避" id="re-dataurl-button"></p>
<div id="canvas-area02"><canvas id="re-canvas" width="250" height="250"></canvas></div>
<div id="image-area02"><img src="" width="250" height="250" alt="複製画像のdataurl"></div>
</body>
"canvas-area01"→ pixi.js로 그리는 영역
"image-area01"→ 위에서 그린 것을 toDataURL()하는 영역
"canvas-area02"→ "canvas-area01"을 복제하여 drawImage하는 영역
"image-area02"→ "canvas-area02"를 toDataURL()하는 영역
script.jsfunction render(){
// create stage
var stage = new PIXI.Container(0xFFFFFF);
// canvas size
var width = 250;
var height = 250;
// create renderer
var renderer = new PIXI.WebGLRenderer(width, height, {backgroundColor: 0xFFFFFF, preserveDrawingBuffer: true});
// renderer's view add DOM
document.getElementById('canvas-area01').appendChild(renderer.view);
// render
PIXI.loader
.add('face', '../images/face.png')
.load(function (loader, resources) {
var face_img = new PIXI.Sprite(resources.face.texture);
stage.addChild(face_img);
renderer.render(stage);
});
}
function dataurl(){
$('#dataurl-button').on('click', function(){
var canvas_area01 = $('canvas')[0];
var imgData = canvas_area01.toDataURL();
$('#image-area01 img').attr('src', imgData);
});
}
function re_dataurl(){
$('#re-dataurl-button').on('click', function(){
var canvas_area01 = $('canvas')[0];
var canvas_area02 = document.getElementById('re-canvas');
if(canvas_area02.getContext){
var context = canvas_area02.getContext('2d');
context.drawImage(canvas_area01, 0, 0);
}
var sendImage = $('#re-canvas')[0];
var imgData = sendImage.toDataURL();
$('#image-area02 img').attr('src', imgData);
});
}
$(function(){
render();
dataurl();
re_dataurl();
});
render() → pixi.js로 그리는 함수
dataurl() → 위에서 그린 것을 toDataURL() 하는 함수
re_dataurl() → render()로 그린 이미지를 다른 캔버스에 drawImage한 다음 toDataURL()하는 함수
페이지에 표시
자신의 썸네일 이미지를 사용해 봅니다.
보통 DataURL()을 사용하여 그리면 거꾸로 되어 버렸습니다.
해결 방법으로 다른 canvas를 준비하고 거기에 drawImage하고 DataURL ()을 사용하면 정상적으로 표시되었습니다.
이번에는 pixi.js에서 일어났지만 Three.js라도 일어날지는 아직 시도하지 않았습니다.
Safari 만이 사건이 일어나는 것 같습니다.
Chrome이나 Firefox, IE 등은 괜찮을 것 같습니다.
Reference
이 문제에 관하여(Safari에서 toDataURL()을 사용하면 이미지가 거꾸로 될 수 있습니다! ?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/smanabee/items/1c75e0c5b5ca1acd0215
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<body>
<h1>toDataURL() テスト</h1>
<div id="canvas-area01"></div>
<p><input type="button" name="button" value="toDataURL()実行" id="dataurl-button"></p>
<div id="image-area01"><img src="" width="250" height="250" alt="通常dataurl"></div>
<p><input type="button" name="button" value="逆さま回避" id="re-dataurl-button"></p>
<div id="canvas-area02"><canvas id="re-canvas" width="250" height="250"></canvas></div>
<div id="image-area02"><img src="" width="250" height="250" alt="複製画像のdataurl"></div>
</body>
function render(){
// create stage
var stage = new PIXI.Container(0xFFFFFF);
// canvas size
var width = 250;
var height = 250;
// create renderer
var renderer = new PIXI.WebGLRenderer(width, height, {backgroundColor: 0xFFFFFF, preserveDrawingBuffer: true});
// renderer's view add DOM
document.getElementById('canvas-area01').appendChild(renderer.view);
// render
PIXI.loader
.add('face', '../images/face.png')
.load(function (loader, resources) {
var face_img = new PIXI.Sprite(resources.face.texture);
stage.addChild(face_img);
renderer.render(stage);
});
}
function dataurl(){
$('#dataurl-button').on('click', function(){
var canvas_area01 = $('canvas')[0];
var imgData = canvas_area01.toDataURL();
$('#image-area01 img').attr('src', imgData);
});
}
function re_dataurl(){
$('#re-dataurl-button').on('click', function(){
var canvas_area01 = $('canvas')[0];
var canvas_area02 = document.getElementById('re-canvas');
if(canvas_area02.getContext){
var context = canvas_area02.getContext('2d');
context.drawImage(canvas_area01, 0, 0);
}
var sendImage = $('#re-canvas')[0];
var imgData = sendImage.toDataURL();
$('#image-area02 img').attr('src', imgData);
});
}
$(function(){
render();
dataurl();
re_dataurl();
});
자신의 썸네일 이미지를 사용해 봅니다.
보통 DataURL()을 사용하여 그리면 거꾸로 되어 버렸습니다.
해결 방법으로 다른 canvas를 준비하고 거기에 drawImage하고 DataURL ()을 사용하면 정상적으로 표시되었습니다.
이번에는 pixi.js에서 일어났지만 Three.js라도 일어날지는 아직 시도하지 않았습니다.
Safari 만이 사건이 일어나는 것 같습니다.
Chrome이나 Firefox, IE 등은 괜찮을 것 같습니다.
Reference
이 문제에 관하여(Safari에서 toDataURL()을 사용하면 이미지가 거꾸로 될 수 있습니다! ?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/smanabee/items/1c75e0c5b5ca1acd0215텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
