운동하고개발하고

[html2canvas] html2canvas 를 사용할때 에러가 날 경우 ( 수정중.. ) 본문

Front-End/JAVASCRIPT-PLUGIN

[html2canvas] html2canvas 를 사용할때 에러가 날 경우 ( 수정중.. )

세폴리아 2015. 8. 20. 10:26

Server.js


// Require
var url, http, request;
url = require('url');
http = require('http');
request = require('request');

// Don't crash when an error occurs, instead log it
process.on('uncaughtException', function(err){
 console.log(err);
});

// Create our server
var server;
server = http.createServer(function(req,res){
 // Set caching
 res.setHeader('Access-Control-Max-Age', 5*60*1000);  // 5 minutes

 // Set CORS headers
 res.setHeader('Access-Control-Allow-Origin', '*');
 res.setHeader('Access-Control-Request-Method', '*');
 res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
 res.setHeader('Access-Control-Allow-Headers', '*');
 if ( req.method === 'OPTIONS' ) {
  res.writeHead(200);
  res.end();
  return;
 }

 // Get the params
 var query = url.parse(req.url,true).query;
 var imageUrl = query.url || null;
 var callback = query.callback || null;
 // check for param existance, error if not
 if ( !imageUrl || !callback ) {
  console.log('Missing arguments');
  res.writeHead(400); // 400 = Bad Request
  res.end();
  return;
 }

 // request the image url
 request({
  url: imageUrl,
  method: 'GET',
  encoding: 'base64',
  timeout: 60*1000
 },function(err,imageRes,imageData){
  var responseData, imageContentType;
  if ( !err && imageRes && imageRes.statusCode === 200 ) {
   res.setHeader('Content-Type', 'application/javascript');
   imageContentType = imageRes.headers['content-type'];
   responseData = 'data:'+imageContentType+';base64,'+imageData;
   res.write(callback+'('+JSON.stringify(responseData)+')');
   res.end();
   console.log('Sent image:', imageUrl);
   return;
  }
  else {
   console.log('Failed image:', imageUrl);
   res.writeHead(imageRes && imageRes.statusCode || 400); // bad request
   responseData = JSON.stringify('error:Application error');
   res.write(callback+'('+responseData+')');
   res.end();
   return;
  }
 });
});

// Start our server
server.listen(process.env.WEBSITEPORT || process.env.PORT || 8000, function() {
 var address = server.address();
 console.log("opened server on %j", address);
});

// Export
module.exports = server;



/////////////////////////////////////////////////


function screenshot(tar){
 html2canvas($("#chart_canvas"), {
  proxy: "/server.js",
  useCORS: true,
    onrendered: function(canvas) {
  
      var img = canvas.toDataURL("image/png");
      console.log(img);
       
      $("#" + tar).html('<img src=' + img + ' width="90%">');    // section2 영역에 section1 을 이미지 capture 내용이 보여짐
      $('.grid_img').append('<div class="sm ui-state-default" style="width:30%;" ><img src=' + img + ' width="100%"></div>');

   
    }
  });
}


위처럼 proxy를 작성해준다.

그리고 server.js 를 만든다.


그러면 문제 해결 !!!!!!


-----------------------

문제가생김... 맵을 이동하면 맵 위에 그려진 element가 나오질 않는다.. 빨리 수정하자..........