스크립트 & 소스코드 공유

1. Elements 패널에서 <canvas> 태그를 찾고 오른쪽에서 스타일 또는 속성을 확인하세요.
2. 우클릭 메뉴에서 “Store as Global Variable”을 선택합니다.
3. 콘솔에서 위와 같은 방법(canvas.toDataURL())으로 이미지 데이터를 추출 후 저장 가능합니다.

• canvas 내부에 이미지가 그려지는 방식에 따라 보안상 이유로 toDataURL()이 실패할 수 있습니다. (예: Cross-Origin 이미지가 캔버스에 포함된 경우)
• 만약 toDataURL()이 반환되지 않거나 오류가 발생하면 이미지 소스 자체를 따로 다운로드해야 할 수 있습니다.

var canvas = $0; // $0는 마지막 선택된 요소를 가리킵니다.

var dataURL = canvas.toDataURL("image/png");

var a = document.createElement('a');

a.href = dataURL;

a.download = 'canvas-image.png'; // 저장될 파일명 지정

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

canvas 요소 제대로 선택했는지 확인

• var canvas = $0; 에서 $0이 실제 <canvas> 요소인지 확인하세요.
• 콘솔에 console.log(canvas); 입력해 보고 canvas 요소 객체가 잘 나오는지 확인해보세요.

직접 data URL을 새 탭에 복사해서 열기

• toDataURL()이 정상적으로 결과를 반환하면, dataURL 자체가 엄청 길 수도 있는데, 콘솔에 들어오는 문자열을 다 복사해서 새 탭 주소창에 붙여넣기 하면 이미지가 나옵니다.

当使用php5自带的file_get_contents方法来获取远程文件的时候，有时候会出现file_get_contents(): failed to open stream: HTTP request failed!这个警告信息。

google或者baidu一下，好多这样的问题，解决的方法都是修改php.ini，把allow_url_fopen给启用，改成 allow_url_fopen = On

这样做可以解决某些人的问题，有人说在php.ini中，有这样两个选项:allow_url_fopen =on(表示可以通过url打开远程文件)，user_agent="PHP"（表示通过哪种脚本访问网络，默认前面有个 " ; " 去掉即可。）重启服务器。

但是有些还是会有这个警告信息，想用完美的解决还差一步，还得设置php.ini里面的user_agent，php默认的user_agent是PHP，我们把它改成Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)来模拟浏览器就可以了

user_agent=”Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)”

在工作中遇到这个问题，后完美解决，故分享给大家。

我批量抓取chemblink的结构式发现循环后有部分图片无法显示，而远程文件是存在的。

抓取远程文件的时候出现类似Warning: readfile(http://www.php100.com/logo.gif)) [function.readfile]: failed to open stream: HTTP request failed! 这样的警告信息，我使用的是

ob_start();

readfile("http://www.php100.com/logo.gif");

$img = ob_get_contents();

ob_end_clean();

这样在运行中会时不时的出现上述错误，我也换过file_get_contents等其他函数都没用用，在网上查阅后发现用CURL方法抓取不会出错

$url = "http://www.php100.com/logo.gif";

$ch = curl_init();

curl_setopt ($ch, CURLOPT_URL, $url);

curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);

curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT,10);

$img = curl_exec($ch);

HTML에서 버튼 생성과 스크립트에서 코드 몇줄이면 간단히 만들 수 있습니다.

HTML

a태그를 통해 onclick으로 함수를 호출합니다.

저는 URL주소복사란 이름의 버튼을 A태그를 통해 만들 예정입니다.

<span class="button gray medium"><a href="#" onclick="clip(); return false;">URL주소복사</a></span>

JAVASCRIPT

a태그에서 호출한 함수인 clip을 작성해줍니다.

url을 변수로 만들고

textarea라는 변수에 textarea의 요소를 생성해줍니다.

이 것을 body의 가장 아래, 즉 </body> 바로 위에 textarea를 추가해줍니다.

(임시 공간이기 때문에 위치는 상관이 없습니다.)

url에는 현재 주소값을 넣어줍니다.

textarea 값에 url를 넣어주고,

textarea를 설정합니다.

그리고 document.execCommand("copy"); 메서드를 사용하면 복사가 됩니다.

그리고 마지막으로 textarea 요소를 없애주고,

복사되었다는 알림창을 띄우면 끝입니다.

<script type="text/javascript">
function clip(){
var url = "<?php echo $_SERVER['SERVER_NAME']?>";
var textarea = document.createElement("textarea");
document.body.appendChild(textarea);
url = window.document.location.href;
textarea.value = url;
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
alert("URL이 복사되었습니다.")
}
</script>