Wednesday, 10 August 2016

Image Data object to Image URI #rails #RUby On Rails #ImageData 

# Convert data uri to uploaded file. Expects object hash, eg: params[:post]  def convert_data_uri_to_upload(data_uri)
    if !data_uri.blank?
      image_data = split_base64(data_uri)
      image_data_string = image_data[:data]
      image_data_binary = Base64.decode64(image_data_string)

      temp_img_file = Tempfile.new("data_uri-upload")
      temp_img_file.binmode
      temp_img_file << image_data_binary      temp_img_file.rewind

      img_params = {:filename => "data-uri-img.#{image_data[:extension]}", :type => image_data[:type], :tempfile => temp_img_file}
      uploaded_file = ActionDispatch::Http::UploadedFile.new(img_params)

      return uploaded_file    end
    return nil  end
 
 
 
 
OR 
 
 
require 'open-uri'def embed_remote_image(url, content_type)
  begin    # asset = open(url, "r:UTF-8") { |f| f.read }  rescue nil    asset = open(url, "r:UTF-8") { |f| f.read }
    base64 = Base64.encode64(asset.to_s).gsub(/\s+/, "")

    "data:#{content_type};base64,#{Rack::Utils.escape(base64)}"  rescue OpenURI::HTTPError => ex
  endend 
Posted by at No comments:

Tuesday, 9 August 2016

JAVASCRIPT IMAGE HIght Width validation 

<input type='file' id='frontPageImage' name='frontPageImage'> 
 
<script> 
 $("#frontPageImage").live('change',function (e) { 
  var file, img; 
  if((file = this.files[0])) { 
    img = new Image(); 
    img.onload = function () { 
    if((this.width<499 || this.width > 599) && (this.height < 599 || this.height > 699)){
 
      alert("Front page image width in-between 500px 
            to 600px and height in-between 600px to 700px."); 
  
      $("#frontPageImage").val(''); 
 
 
 
      } 
 
      var isImage = validateImageExtention(this); 
      if(!isImage){ 
        alert("Select a image.");
        $("#frontPageImage").val(''); 
        } 
      }; 
 
  img.src = _URL.createObjectURL(file); 
 }});


</script>
Posted by at No comments:

Friday, 5 August 2016

Crop Image with javascript tool or help 

 http://scottcheng.github.io/cropit/
 
https://github.com/hongkhanh/cropbox 
 
https://foliotek.github.io/Croppie/ AND http://www.croppic.net/
 
 
 
 
Cropit Example 
 
 
 
 
 
<!DOCTYPE html>
<html>
  <head>
    <title>cropit</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="jquery.cropit.js"></script>

    <style>
     



.cropit-preview {
  /*background-color: #f8f8f8;*/  /*background-size: cover;*/  border: 1px solid #ccc;
  /*border-radius: 3px;*/  /*margin-top: 7px;*/  width: 700px;margin:auto;
  height: 250px;
}

.cropit-preview-image-container{
  position: absolute;
  z-index: 0;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
.cropit-image-preview .error-msg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 20px;
  color: #fff;
  background: rgba(210,65,72,0.8);
  line-height: 1.5;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.25s;
  -moz-transition: opacity 0.25s;
  -o-transition: opacity 0.25s;
  -ms-transition: opacity 0.25s;
  transition: opacity 0.25s;
}

.cropit-image-preview.has-error .error-msg {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}

.cropit-preview-background{
  opacity: .2;
}
.cropit-preview-image-container img{max-width:none !important;width:auto !important;}
.btncropcover{background-color: #ff005e !important; border: 1px solid #ff005e !important;
  padding: 8px 20px !important;color: #fff !important;}
.btncropcover:hover{background-color: transparent !important;color: #ff005e !important;transition: 0.2s;}
/*input range css*/
input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
border: 0px !important;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #FF2F7B;
  background: #FFA6AF;
  border-radius: 0px;
  border: 0px solid #FF2F7B;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #FF005E;
  border: 0px solid #FF005E;
  height: 22px;
  width: 9px;
  border-radius: 0px;
  background: #FF005E;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -9.5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #FFA6AF;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #FF2F7B;
  background: #FFA6AF;
  border-radius: 0px;
  border: 0px solid #FF2F7B;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #FF005E;
  border: 0px solid #FF005E;
  height: 22px;
  width: 9px;
  border-radius: 0px;
  background: #FF005E;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #FFA6AF;
  border: 0px solid #FF2F7B;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #FF2F7B;
}
input[type=range]::-ms-fill-upper {
  background: #FFA6AF;
  border: 0px solid #FF2F7B;
  border-radius: 0px;
  box-shadow: 0px 0px 0px #FF2F7B;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #FF005E;
  border: 0px solid #FF005E;
  height: 22px;
  width: 9px;
  border-radius: 0px;
  background: #FF005E;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #FFA6AF;
}
input[type=range]:focus::-ms-fill-upper {
  background: #FFA6AF;
}
.cover-img-upload{  cursor: pointer;
                    width: 150px;
                    height: 45px;
                    background:#ff005e;position: relative;
                  }
.cover-img-upload:before{    content: "Choose file";
  float: left;
  padding: 13px 0;
  font-size: 17px;
  color: #fff;
  text-align: center;
  width: 100%;}

.cover-img-upload input {
  display: block !important;
  width: 150px !important;cursor: pointer;
  height: 45px !important;z-index: 99999;
  opacity: 0 !important;position: absolute;top: 0;
  overflow: hidden !important;
}
/*end input range css*/
 
 </style>
  </head>
  <body>
    <div class="image-editor">
      <input type="file" class="cropit-image-input">
      <div class="cropit-preview"></div>
      <div class="image-size-label">
        Resize image
      </div>
      <input type="range" class="cropit-image-zoom-input">
      <button class="rotate-ccw">Rotate counterclockwise</button>
      <button class="rotate-cw">Rotate clockwise</button>

      <button class="export">Export</button>
    </div>
    
 
 <div id="image-cropper" class="image-cropper">
  <div class="cropit-preview"></div>
  
  <input type="range" class="cropit-image-zoom-input" />
  
  <input type="file" class="cropit-image-input" />
  <div class="select-image-btn">Select new image</div>
  <button class="export-cropper">Export</button>
</div>

    <script>
      $(document).ready( function () {
 
   $imageCropper = $('.image-editor').cropit({      maxZoom: 1.5,      initialZoom:'image',       /*imageState: {       src: 'http://lorempixel.com/500/400/',     },*/   //imageBackground: true,   onImageError: function(e) {         if (e.code === 1) {             $('.error-msg').text("Please use an image that's at least " + $('.cropit-preview').outerWidth() + "px in width and " + $('.cropit-preview').outerHeight() + "px in height.");             $('.cropit-preview').addClass("has-error")                 window.setTimeout(function() {                     return function() {                         return $('.cropit-preview').removeClass("has-error")                     }                 }(this), 3e3)         }     }
 });
 $('.rotate-cw').click(function() {
          $('.image-editor').cropit('rotateCW');
        });
        $('.rotate-ccw').click(function() {
          $('.image-editor').cropit('rotateCCW');
        });

        $('.export').click(function() {
          var imageData = $('.image-editor').cropit('export');
          window.open(imageData);
        });
        
        $('#image-cropper').cropit({
    imageBackground: true,
    imageBackgroundBorderWidth: 15, // Width of background border  allowDragNDrop: true,  onImageError: function(e) {      if (e.code === 1) {          $('.error-msg').text("Please use an image that's at least " + $('.cropit-preview').outerWidth() + "px in width and " + $('.cropit-preview').outerHeight() + "px in height.");          $('.cropit-preview').addClass("has-error")              window.setTimeout(function() {                  return function() {                      return $('.cropit-preview').removeClass("has-error")                  }              }(this), 3e5)      }  }
});  
  $('.export-cropper').click(function() {
          var imageData = $('.image-cropper').cropit('export');
          window.open(imageData);
        });
      });
      
            //    For Cover Image
      
    </script>
  </body>
</html>
Posted by at 1 comment:
Subscribe to: Posts (Atom)