截取页面并上传保存图片

来源：互联网发布：陌生人交友软件排行编辑：程序博客网时间：2024/06/05 07:22

此实例是用html2canvas 插件生成图片，然后通过ajax 提交到ruby后台存储成图片。

1加载js

<script type="text/javascript" src="html2canvas.min.js"></script>

2 实现js方法

  //截图  var activity_id = <%= @activity.nil? ? 0 : @activity.id %>;  function AJRD_printDom(id){    html2canvas(document.getElementById(id), {       allowTaint: true,       taintTest: false,       onrendered: function(canvas) {         canvas.id = "mycanvas";         var dataUrl = canvas.toDataURL();  //生成base64图片数据         $.ajax({          async:true,          type : 'post',          dataType : 'json',          url : "/activities/upload_img",          data : {            id: activity_id,            activity: {              image: dataUrl            }          },          success :function(data){            window.location.href="/activities"          }        });        // var oPop =   window.open(dataUrl,"","width=1000,   height=500,   top=100,   left=0");         }     });  }

3 ruby接受参数并保存图片

def upload_imgactivity = Activity.find params[:id]img_base64 = params[:activity][:image]img_base64 = img_base64["data:image/png;base64,".length..-1]file_source = "/uploads/activity/screen#{activity.id}.jpg"FileUtils.mkdir_p "#{File.expand_path(Rails.root)}/public/uploads/activity" if !(File.exist?("#{File.expand_path(Rails.root)}/public/uploads/activity"))File.open("#{Rails.root}/public#{file_source}", "wb") {|f|f.write Base64.decode64(img_base64)f.close}activity.update_attributes(:image=>file_source)render :json => {}end

此时图片被保存成文件，路径存储到数据库中。

1 0